7 
<link rel="stylesheet" media="only screen and (max-width:1280px)" href="css/article1280.css">

我正在编写响应式 CSS 代码，我意识到三星 Galaxy S4 智能手机的屏幕分辨率为 1080x1920——我的 23 英寸显示器为 1920x1080。我从未在这款手机上浏览过（我有一部 iPhone 3 320x480 的分辨率，这是我认为所有智能手机都在附近，宽度低于 800 像素）所以我有点困惑。我应该如何为屏幕分辨率为 1080x1920 的智能手机创建移动网站？

4

6 回答 6

20

Galaxy S4 向浏览器报告 360px x 640px

纵横比为 9/16

像素比为 3

@media screen and (max-device-width: 360px)

@media screen and (-webkit-min-device-pixel-ratio: 3)

@media screen and (device-aspect-ratio: 9/16)
于 2013-07-25T18:59:25.907 回答
0

使用@media screen and (max-device-width: your dimension here).

于 2013-06-04T18:35:19.970 回答
0

在这种情况下，您可能会发现一些有用的媒体查询是：

@media screen and (orientation: portrait | landscape) { ... }

@media screen and (device-aspect-ratio: #/#) { ... }

这是一个包含更多信息的链接：https ://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

于 2013-06-04T17:13:21.990 回答
0

在 GS4 上进行设计时，除非您在标题中使用视口标签，否则它会呈现为常规宽屏。我发布了我用来使其响应的示例@三星 Galaxy S4 响应式设计@media

于 2014-07-03T00:27:03.247 回答
0

测试和工作！

@media screen and (-webkit-min-device-pixel-ratio: 3.0) and (max-width: 1080px), screen and (max-width: 480px)
于 2016-02-25T06:43:27.660 回答
0

确保你的 head 部分中有 viewport 元标记。像这样的东西：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

这告诉用户代理考虑像素密度并相应地重新缩放。所以你的 1080 像素宽的三星 Galaxy S4 将像一个 360 像素宽的屏幕。

于 2015-12-01T23:30:34.830 回答