Css 大屏幕手机的断点

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

div#navbar{
显示：无；
}
@介质（最小宽度：980px）{
div#导航栏{显示：内嵌；宽度：100%；文本对齐：右；右填充：50px；顶部填充：0px；}
div#navbar ul{列表样式：无；边距：0px 0px 0px 50px；填充：0；溢出：隐藏；}
div#navbar ul li{float:left；字体系列：'Playfair Display'，无衬线；字体大小：16px；字体重量：700；线条高度：20px；}
div#导航栏ul li a{填充：0px 12px；颜色：0d0d0d；文本转换：无；文本阴影：1px 1px 1px#ffffffff；}
div#navbar ul li a:hover{文本装饰：无；颜色：#ffffff；文本阴影：1px2px2px#000000；}
#内容{页边距顶端：115px；}
}

我刚刚看了一下这张表：

设备像素比
HTC Desire 1.5
HTC Desire HD 1.5
HTC不可思议S 1.5
HTC One X 2.0

因此，一种方法是，您可以使用以下方法使用此

设备像素比率

：

@media（-webkit最小设备像素比：2）

并瞄准移动浏览器。还有其他的事情，比如方向。这些位确保它的目标是移动web浏览器，而不是台式机或大屏幕投影仪

这方面的一个例子是：

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

---

以上仅适用于HTC One X

通常，您可以保持相同的媒体查询，而不受物理屏幕分辨率的影响。您不需要特别为高分辨率屏幕调整多维媒体查询，除非处理不同分辨率的不同图像之类的事情。我会尽力解释原因

CSS像素不是物理像素。 手机的物理像素分辨率基本上是不相关的：媒体查询响应的是CSS像素，这是一个完全不同的东西

这里有两件事需要注意：

• “理想视口”大小
• 您正在使用的视口

该设备将有一个以像素为单位的“理想”视口（从浏览器的角度来看），通常表示为物理屏幕大小的倍数

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

高端手机的屏幕可能为960像素宽，DPR为3。因此，从CSS和媒体查询的角度来看，它的视口仍然被认为是320像素宽。在纵向模式下，大多数手机最终都会在300–500像素范围内的某个地方有一个理想的视口

使用理想视口。 注意：这取决于您实际告诉浏览器使用理想的视口-通常是通过使用类似

的元标记。如果您不这样做，大多数移动浏览器将假定您的站点不适合在小屏幕上查看，并将其缩小，使视口假装为桌面大小的浏览器（大约1000px宽）。然后，您的媒体查询将响应该假尺寸

---

这里有一个。

第二个示例不适用于使用设备理想视口的站点（例如，当使用

等时）。@Emil你为什么这么说？如果是这样的话，我们怎样才能修复它呢？事实上，它仍然有效——我有点误读了。但这并不是因为像素比率查询：初始媒体查询仍然可以工作。解释：如果TerryAlly担心他的媒体查询会被高分辨率的手机浏览器接收，那么答案不是将其限制在高分辨率屏幕上。通过添加视口元使页面响应后，视口大小将基于理想的视口大小，而不是物理像素。更多细节请参见我的答案。HTC One的物理宽度是1080，但就CSS而言，它是360，因为DPR是3。@Emil你知道吗？我在设备和另外两台设备上测试了它，然后只有我发布了这个答案<代码>：）@Praveen Kumar-现在一切正常。非常感谢你的帮助。