Safari撤消媒体查询

Question

我正致力于平板电脑 - 智能手机系列的响应式设计。

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

@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;">

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

Answer 1

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

我只在开发工具中试过这个，但是通过在DOM树中向上迈出一步，它似乎会迫使你的媒体查询行为正常。

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

Answer 2

试试这个

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

我认为这有帮助。