在 iPhone (4S) 上忽略 CSS 媒体查询答案

【问题标题】：CSS media queries ignored on iPhone (4S)在 iPhone (4S) 上忽略 CSS 媒体查询
【发布时间】：2015-11-26 14:10:30
【问题描述】：

我在 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，它应该在宽度低于 1000 像素的所有设备上将背景涂成红色，它在 PC 上运行良好，即使在 Chrome 的 iPhone 4 设备模拟中，但在真正的 iPhone 4S 上它会得到忽略，我看到的是白页。

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

【问题讨论】：

标签： html css iphone media-queries

【解决方案1】：

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

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

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

【讨论】：

@pokrishka 很高兴我能帮上忙 :)