Question

我在我的CSS中使用手机第一种方法，台式机/笔记本电脑的断点为980px。如何调整此代码以确保大屏幕手机（例如1080 x 1920分辨率的HTC）显示手机设计？这是我的CSS的一个例子。感谢。

div#navbar {
    display: none;
}

@media (min-width: 980px) {
    div#navbar {display: inline;width: 100%;text-align: right;padding-right: 50px;padding-top: 0px;}
    div#navbar ul {list-style: none;margin:0px 0px 0px 50px; padding: 0;overflow: hidden;}
    div#navbar ul li {float: left;font-family: 'Playfair Display', sans-serif;font-size: 16px;font-weight: 700;line-height: 20px;}
    div#navbar ul li a {padding: 0px 12px;color: #0d0d0d;text-transform: none;text-shadow: 1px 1px 1px #ffffff;}
    div#navbar ul li a:hover {text-decoration: none;color: #ffffff;text-shadow: 1px 2px 2px #000000;}
    #content {margin-top:115px;}
}

Answer 1

通常，您可以保持相同的媒体查询独立于物理屏幕分辨率。不需要专门针对高分辨率屏幕调整维度媒体查询，除非针对不同分辨率处理不同图像之类的事情。我会试着解释原因。

CSS像素不是物理像素。

手机的物理像素分辨率基本上无关紧要：媒体查询响应的是 CSS像素，这是完全不同的事情。

这里有两件事需要跟踪：

“理想视口”大小。
您正在使用哪个视口。

设备将以像素为单位测量“理想”视口（从浏览器的角度来看），通常表示为物理屏幕尺寸的倍数。

例如：旧的iPhone 3G的设备像素比（DPR）为1，屏幕的物理宽度为320像素。理想的视口是320像素 - 这意味着您可以在其中放入320像素的内容。

高端手机的屏幕宽度为960像素，DPR为3.因此，从CSS和媒体查询的角度来看，其视口仍被视为320像素宽。大多数手机最终会在300-500像素范围内以纵向模式显示理想的视口。

使用理想视口。

注意：这取决于您实际上告诉浏览器使用理想的视口 - 通常使用像<meta name="viewport" content="width=device-width,initial-scale=1">这样的元标记。如果不这样做，大多数移动浏览器都会认为您的网站不适合在小屏幕上查看，并缩小以使视口假装成桌面大小的浏览器（大约1000像素左右）。然后，您的媒体查询将响应该假大小。

这是very thorough presentation by PPK on the matter。

Answer 2

我刚看了一下这张桌子：

Device              Pixel Ratio
HTC Desire          1.5
HTC Desire HD       1.5
HTC Incredible S    1.5
HTC One X           2.0

因此，您可以使用以下方法使用此device-pixel-ratio：

@media (-webkit-min-device-pixel-ratio: 2)

定位移动浏览器。还有其他一些事情，比如orientation。这些位确保其定位移动网络浏览器，不台式机或大屏幕投影机。

这方面的一个例子是：

@media screen and (min-width: 980px and -webkit-min-device-pixel-ratio: 2)

以上内容仅适用于HTC One X。

大屏幕手机的断点

2 个答案:

CSS像素不是物理像素。

使用理想视口。