Retina 设备是否需要自己的媒体查询？

Question

我有几个媒体查询在 Retina 设备上被忽略了——例如，iPhone 6 Plus。 iPhone 6 Plus 的屏幕 min-device-width 是 414px。使用以下媒体查询，我希望 phone 会使 customClass div 具有 100% 的宽度。但是使用这个class的div仍然是33.33333%。（我简化了下面的示例代码，删除了浮点数等）

比如我有下面的CSS:

.customClass {
   width: 33.33333%;
}

@media screen and (max-width: 800px) {
    .customClass {
      width: 100%;
    }
}

顺便说一下，我的 header 里有这个：

<meta name="viewport" content="width=device-width, initial-scale=1">

我认为上面的视口元标记会导致设备宽度 (414px) 用作宽度，因此它应该在 .customClass 上使用 100% 宽度。

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

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

我试图避免特定于设备的媒体查询like this，因为要担心的设备太多，这似乎不切实际。（我也尝试了其中一些，它们确实可以针对特定设备，例如 iPhone 6 Plus，但我更希望一次性针对 800 像素以下的任何设备。）

所以快速总结一下，如果我的示例代码是正确的并且标题问题的答案很简单 "No"，那么在针对视网膜设备时我还缺少其他东西吗？可能是一个更大的全站问题？（我不是要你找到这个问题，如果是其他问题我会深入挖掘..但这是一个巨大的网站;））

谢谢！

Answer 1

没有。不需要特定于视网膜的媒体查询。

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

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

Retina 设备是否需要自己的媒体查询？

Do retina devices NEED their own media queries?

css

iphone

retina

responsive