视网膜设备是否需要自己的媒体查询？

我有几个媒体查询在视网膜设备上被忽略 - 例如，iPhone 6 Plus。 iPhone 6 Plus的屏幕最小设备宽度为414px。使用以下媒体查询，我期望手机将使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">

我认为上面的视口meta标签会导致设备宽度（414px）被用作宽度，所以它应该使用.customClass上的100％宽度。

它似乎像更高的像素密度导致它忽略800px宽度的查询，但我不知道为什么。

经过大量阅读和研究后，我发现如果您使用的是@ 2x图像，则只想使用视网膜媒体查询，例如，定位所有视网膜屏幕（而不是像我这样的网站布局在上面做）。所以我不认为我需要像only screen and (min-device-pixel-ratio: 2)这样的视网膜媒体查询，以便为iPhone 6 Plus提供100％的宽度。

我试图避免设备特定的媒体查询like this因为有这么多设备需要担心，这似乎不切实际。（我也尝试了其中的一些，他们确实在针对特定设备（如iPhone 6 Plus）工作，但我更倾向于一举以800像素为目标）。

因此，要快速总结它，如果我的示例代码是正确的，对标题问题的答案是简单的“否”，那么在瞄准视网膜设备时是否还有其他东西缺失？可能是一个更大的网站问题？（我不是要你找到这个问题，如果是别的，我会深入挖掘......但它是一个巨大的网站;））

谢谢！

来源

2016-11-29 Kyle

您的元标记看起来不错，而且您的CSS看起来不错 - 您无需以任何方式修改该MQ以使其在视网膜手机或iPhone 6 Plus上工作。在移动设备模拟器上选择该手机时，您是否可以在Chrome的开发者工具中重现此问题？我怀疑CSS还有另一个问题，调试会有帮助。 –

没有。视网膜特定媒体查询没有必要。

在现代世界中，您可以使用矢量或字体图标，可以无限缩放而不损失质量。关于照片，为视网膜显示添加不同的内容是毫无意义的。

上面的代码是正确的。请记住，渲染的分辨率是实际的设备分辨率/像素密度。这意味着iphone是750x1334px，像素密度为2（@ 2x），因此实际呈现的分辨率为375x667像素。

来源

2016-11-29 22:39:18 scooterlord

视网膜设备是否需要自己的媒体查询？

回答

相关问题