iphone - CSS 查询在我的 iPhone 4 上不起作用

Question

我尝试使用通过 Google 找到的几个媒体查询来定位 iPhone，但我的网站仍然没有像我希望的那样在实际 iPhone 上显示。当我使用 iphone4simulator.com 时，它看起来不错。这是我现在使用的媒体查询：

@media only screen and (device-width: 480px) and (orientation: portrait) and (resolution: 163dpi)

这是网址：cfbpreview

谢谢。

Answer 1

由于视网膜显示屏，您必须为 iPhone 4 添加此功能。

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

这是响应式设计可能需要的所有媒体查询的链接。

重要提示：这将适用于像素比超过 1.5 的所有设备。如果您希望它更具体到设备，则必须向 meida 查询添加更多条件。