媒体查询手机像素宽度与屏幕分辨率不匹配

Question

在CSS中进行媒体查询时，我注意到在移动设备上工作时用于最小宽度和最大宽度的像素值似乎与设备的实际宽度无关。

例如，如果我要定位风景iPhone 5，我可以使用max-width:568px并触发它，但如果我谷歌iPhone 5分辨率，我看到它的长边实际上是1136像素。

为什么媒体查询中使用了设备分辨率的一半？

更重要的是，如何在仍然使用相同的桌面查询时阻止这种情况发生？

Answer 1

首先，看一下这个图表chart here。在该图表中，发生这种情况是因为iPhone（以及其他手机）也会向几个渲染的像素渲染点（所谓的＆＃34; device-pixel-ratio＆＃34;）。

有时它甚至会变得更加混乱，因为有些设备使用上采样或下采样技术来适应物理显示尺寸。

例如：

IPhone 5s
Points: 320 x 568
Rendered pixels: 640 x 1136
Device pixel ratio: 640 / 320 = 1136 / 568 = 2

在您的查询中，您应使用积分（320 x 568）作为衡量标准。

This article，您可以在其中找到不同设备的分辨率，也非常有用。

我无法抗拒地提到，根据内容而不是针对特定设备制作断点是一种很好的做法。请参阅@ DaveEveritt＆＃39; post。