媒体查询 phone 像素宽度与屏幕分辨率不匹配
Media Query phone pixel width does not match screen resolution
在 CSS 中进行媒体查询时，我注意到在移动设备上工作时用于最小宽度和最大宽度的像素值似乎与设备的实际宽度无关。
例如，如果我要瞄准风景 iPhone 5 我可以使用 max-width:568px 它会被触发但是如果我 google iPhone 5 分辨率我看到它的长边实际上是 1136px。
为什么媒体查询使用了设备分辨率的一半？
更重要的是，如何在仍然对桌面使用相同查询的同时阻止这种情况发生？
首先，看一下这张图表chart here. In the terms of that chart, this happens because iPhones (and other phones as well) render points to the several rendered pixeles (so called "device-pixel-ratio")。
有时它甚至会变得更加混乱，因为某些设备使用上采样或下采样技术来适应物理显示尺寸。
例如：
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 的 post.
在 CSS 中进行媒体查询时，我注意到在移动设备上工作时用于最小宽度和最大宽度的像素值似乎与设备的实际宽度无关。
例如，如果我要瞄准风景 iPhone 5 我可以使用 max-width:568px 它会被触发但是如果我 google iPhone 5 分辨率我看到它的长边实际上是 1136px。
为什么媒体查询使用了设备分辨率的一半？
更重要的是，如何在仍然对桌面使用相同查询的同时阻止这种情况发生？
首先，看一下这张图表chart here. In the terms of that chart, this happens because iPhones (and other phones as well) render points to the several rendered pixeles (so called "device-pixel-ratio")。
有时它甚至会变得更加混乱，因为某些设备使用上采样或下采样技术来适应物理显示尺寸。
例如：
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 的 post.