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媒体查询适用于所有浏览器（或至少主要的浏览器）。我的目标是至少

IE Windows
Safari Windows
Chrome Windows
Firefox Windows
Safari iPod
Chrome iPod

Answer 1

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

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

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

1 个答案: