CSS3媒体查询无法在iPod/iPhone上使用Safari

Question

我正在开发一个响应式设计网站.该网站将针对iPhone和iPod进行优化(宽度均为640px).

我正在使用以下CSS3媒体查询:

    @media screen and (max-width: 640px) {
        .display-none-mobile{
            display: none;
        }
    }
    @media screen and (min-width: 641px) {
        .display-none-desktop{
            display: none;
        }
    }

当我将浏览器宽度缩小到640px时,上面的代码在我的桌面浏览器上运行良好.但是,当我尝试使用Safari浏览器在iPod上测试网站时,代码不起作用.

我将CSS3媒体查询更改为

    @media screen and (max-device-width: 640px) {
        .display-none-mobile{
            display: none;
        }
    }
    @media screen and (min-device-width: 641px) {
        .display-none-desktop{
            display: none;
        }
    }

现在,响应式设计适用于iPod上的Safari,但它与所有其他桌面浏览器上的布局相混淆.我的桌面上的oChrome,IE,FF完全忽略了那些css3媒体查询(宽度为640px).

所以到现在为止我已经发现有一些与css3媒体查询的跨浏览器兼容性相关的东西,但是找不到关于这个的很多信息.我可以通过哪些方式更新我的代码,使css3媒体查询适用于所有浏览器(或至少主要的浏览器).我的目标是至少

1. IE Windows
2. Safari Windows
3. Chrome Windows
4. Firefox Windows
5. Safari iPod
6. Chrome iPod

Answer 1

如果您未<meta>在HTML上添加以下标记,设备将忽略您的媒体查询

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
    </body>
</html>