Safari 撤消媒体查询答案

【问题标题】：Safari undoes media queriesSafari 撤消媒体查询
【发布时间】：2014-09-17 06:05:39
【问题描述】：

我正在为平板电脑和智能手机系列进行响应式设计。

这是我用于此系列设备的媒体查询：

@media (min-width: 300px) and (max-width: 999px) {
    header nav ul {
        display: none;
    }
}

如果屏幕宽度在 300-999px 之间，这只是隐藏导航栏列表。

这在 Chrome 上运行良好，但在 Safari 上，页面最初加载时会考虑媒体查询。页面加载几秒钟后，媒体查询被取消，页面恢复为默认布局。

我的 iPhone Safari 上也会发生同样的情况。媒体查询在 Chrome 上运行良好（在桌面和 Android 上）

如何确保我的媒体查询始终在 Safari（桌面/iPhone）上强制执行？

You can see the page here for yourself

编辑：

我已添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0;">

这并不能解决问题。它有助于缩放，但当页面完全加载时导航栏仍会弹出。

【问题讨论】：

【解决方案1】：

您在 Safari 中得到了一些非常奇怪的结果，其中您的媒体查询无法覆盖主类，即使您之后加载它们也是如此。

我只在开发工具中尝试过，但是通过在 DOM 树中上一步，它似乎会强制您的媒体查询正常运行。

@media (min-width: 300px) and (max-width: 999px) {
    body header nav ul {
        display: none;
    }
}

【讨论】：

我没有在桌面 Safari 上尝试过这个。感谢您指出问题出在一般的 Safari 上，而不仅仅是在我的 iPhone 上。我在 DOM 中进行了尝试。它不工作。在加载页面时考虑到媒体查询，然后在几秒钟后恢复到默认布局，我得到了同样奇怪的行为。
谢谢，它确实可以在 DOM 中运行。出于某种原因，我认为这与 Safari 在页面加载后执行弹出状态有关（其他浏览器不这样做）
可能就是这样。我从来没有遇到过这个确切的问题，这确实很奇怪。
如果问题不再存在，您能否将其标记为已解决。

【解决方案2】：

试试这个

@media only screen 
and (min-device-width : 300px) 
and (max-device-width : 999px) 
{ /* STYLES GO HERE */}

我觉得有帮助。

【讨论】：