大屏幕移动电话的断点

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 像素宽左右(。然后，您的媒体查询将响应该虚假大小。

这是PPK对此事的非常全面的介绍。

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.这些位确保它针对移动 Web 浏览器，而不是台式机或大屏幕投影仪。

这方面的一个例子是：

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

以上仅适用于HTC One X。