iphone - 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 */
}