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上工作正常，即使在iPhone 4的Chrome设备模拟中，但在真实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;
    }
}

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

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

1 个答案: