4

我正在开发一个响应式设计网站。该网站将针对 iPhone 和 iPod（宽度均为 640 像素）进行优化。

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

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

当我将浏览器宽度缩小到 640 像素时，上面的代码在我的桌面浏览器上运行良好。但是，当我尝试使用 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 在我的桌面上（宽度为 640 像素）完全忽略了这些 css3 媒体查询。

所以现在我已经发现有一些与跨浏览器兼容性与 css3 媒体查询有关的东西，但找不到太多关于此的信息。我可以通过什么方式更新我的代码以使 css3 媒体查询适用于所有浏览器（或至少主要浏览器）。我的目标至少是

  1. 浏览器窗口
  2. 视窗
  3. 铬窗口
  4. 火狐视窗
  5. Safari iPod
  6. 铬 iPod
4

1 回答 1

12

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

<!DOCTYPE html>
<html lang="en-us">
    <head>
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
    </body>
</html>
于 2013-05-09T03:31:35.687 回答