Question

我有几个媒体查询在视网膜设备上被忽略 - 例如，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">

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

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

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

我正在尝试避免设备特定的媒体查询like this，因为有太多设备需要担心，这似乎不切实际。（我也尝试了其中一些，他们确实在针对像iPhone 6 Plus这样的特定设备上工作，但我更希望一举定位800px以下的任何设备。）

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

谢谢！

Answer 1

没有。视网膜特定的媒体查询没有NEED。

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

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

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

1 个答案: