Question

我正在测试我的网站的移动版本，并设置了一个新的mobile.css文件，并使用以下代码重定向到它。（style.css是我的主要＆＃39;桌面＆＃39; 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的移动版本我已经做过更改背景颜色等测试它的工作情况，它只显示常规版本。< / p>

提前感谢您的帮助

Answer 1

您的媒体查询是引用iPhone4而不是iPhone5。您可以使用device-aspect-ratio：

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

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

1 个答案: