【发布时间】：2016-11-30 06:39:18
【问题描述】：
我有几个媒体查询在 Retina 设备上被忽略 - 例如，iPhone 6 Plus。 iPhone 6 Plus 的屏幕最小设备宽度为 414 像素。使用以下媒体查询，我希望手机会使 customClass div 具有 100% 的宽度。但是使用这个类的 div 仍然是 33.33333%。 （我已经为示例简化了下面的代码，删除了浮点数等）
例如，我有以下 CSS：
.customClass {
width: 33.33333%;
}
@media screen and (max-width: 800px) {
.customClass {
width: 100%;
}
}
顺便说一句，我的标题中有这个：
<meta name="viewport" content="width=device-width, initial-scale=1">
我认为使用上面的视口元标记，它会导致设备宽度（414px）被用作宽度，所以它应该使用 .customClass 上的 100% 宽度。
似乎更高的像素密度导致它忽略了 800px 宽度查询，但我不知道为什么。
经过大量阅读和研究，我发现如果您使用 @2x 图像（例如，针对所有视网膜屏幕而不是像我这样的网站布局），您只想使用视网膜媒体查询我在上面做）。所以我认为我不需要像 only screen and (min-device-pixel-ratio: 2) 这样的视网膜媒体查询来为 iPhone 6 Plus 提供 100% 的宽度。
我试图避免特定于设备的媒体查询like this，因为要担心的设备太多，这似乎不切实际。 （我也尝试了其中一些，它们确实可以针对特定设备（例如 iPhone 6 Plus），但我更希望一举针对任何低于 800 像素的设备。）
所以快速总结一下，如果我的示例代码是正确的，并且标题问题的答案是简单的“否”，那么在针对视网膜设备时我是否还缺少其他东西？可能是一个更大的全站问题？ （我不是要求你找到这个问题，如果是其他问题，我会更深入地挖掘......但它是一个巨大的网站；））
谢谢！
【问题讨论】：
-
您的元标记看起来不错，您的 CSS 看起来也不错 - 您无需以任何方式修改该 MQ 即可使其在视网膜手机或 iPhone 6 Plus 上运行。在移动设备模拟器上选择手机时，您能否在 Chrome 的开发者工具中重现此问题？我怀疑 CSS 存在另一个问题，调试会有所帮助。
标签： css iphone responsive retina