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

Question

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

3

我正在处理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上起作用。

- waterplea

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AndrewL64 · Accepted Answer

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

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

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