iPhone 媒体查询不重定向到移动样式表

Question

我正在测试我网站的移动版本并设置了一个新的 mobile.css 文件并使用以下代码重定向到它。 (style.css 是我主要的“桌面”css)

<link rel="stylesheet" href="mobile.css" media="only screen and (max-device width:480px)"/>

        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/style.css" media="screen" />

我在 iPhone 5 上测试它，它根本不显示 CSS 的移动版本我已经做了一些事情，比如改变背景颜色等来测试它的工作，它只显示常规版本。

预先感谢您的帮助

Answer 1

您的媒体查询引用的是 iPhone4 而不是 iPhone5。您可以使用设备纵横比:

iPhone < 5:
@media screen and (device-aspect-ratio: 2/3) {}

iPhone 5:
@media screen and (device-aspect-ratio: 40/71) {}

iPad:
@media screen and (device-aspect-ratio: 3/4) {}

或者如果你想结合你可以做这样的事情:

@media only screen and (max-device-width: 480px), only screen and (min-device-width: 560px) and (max-device-width: 1136px) and (-webkit-min-device-pixel-ratio: 2) {
    /* iPhone only */
}