CSS 媒体查询在 iPhone 上被忽略（4S）

Question

我在 iPhone 上遇到了相当奇怪的行为。这是一个非常简单的网站，我已经放在了免费托管上，所以如果你有 iPhone，你可以自己看看：http://ainkin.bugs3.com/

html的内容是：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="style.css">        
        <title>iPhoon test</title>
    </head>

    <body>

    ***some content****

    </body>
</html>

CSS的内容是：

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

@media screen and (max-width: 1000px),
@media screen and (max-device-width: 1000px) {
    body {
        background: red;
    }
}

在我看来这似乎是一个正确的 HTML+CSS 并且它应该在宽度低于 1000px 的所有设备上将背景色设为红色，它在 PC 上工作正常，即使在 Chrome 的 iPhone 4 设备仿真，但在真正的 iPhone 4S 上它被忽略，我看到的是白页。

有人可以建议我该怎么办吗？这是一个简化的示例，我的真实代码要复杂得多并且有多个断点，它们在 PC、Android 平板电脑和 Windows Phone 的 IE 上运行良好，但我无法获取它们继续 iPhone.

Answer 1

@media screen and (max-width: 1000px)  {
    body {
        background: red;
    }
}

@media screen and (max-device-width: 1000px) {
    body {
        background: red;
    }
}

尝试分离媒体查询，看看是否有帮助。

CSS 媒体查询在 iPhone 上被忽略（4S）

CSS media queries ignored on iPhone (4S)

html

css

iphone

media-queries