Question

我有一个javascript函数，在用户调整窗口大小时调用，根据CSS媒体查询（max-width）是否为真，它会执行不同的操作。为了做到这一点，我有一个在触发媒体查询时可见的div。然后javascript代码检查div的可见性（在resize事件内）。这在Chrome和Firefox中效果很好，但在Safari（7.0.5）中给了我一些小问题。如果窗口调整大小并且大约是触发条件的宽度，则js代码有时与CSS不同步：当我检查div时，我可以看到它显示（意味着媒体查询是工作正常），但检查可见性的js条件仍然返回false。代码非常简单：

JQuery的：

if ($("#is-mobile").css("display") === "none") {
        $("#site-nav").show();
    } else {
        $("#site-nav").hide();
    }

CSS：

#is-mobile {
    width: 0;
    height: 0;
    display: none;
}

@media screen and (max-width: 500px) {
    #is-mobile {
        display: block;
    }
}

仅当窗口的CSS宽度大致介于485px和499px之间时，才会发生此不匹配。这让我觉得它与$（window）.width（）和垂直滚动条可见时可能出现的CSS视口宽度之间的~15-20px不匹配有关（参见例如here）。我的窗口中有一个垂直滚动条，所以我想知道是不是导致问题的原因。具有讽刺意味的是，滚动条怪异是为什么我要检查div的可见性而不是首先使用$（window）.width（）！

编辑：刚刚在一个空的html中测试了这段代码（所以没有垂直滚动条），问题确实消失了。所以必须与滚动条相关。

媒体查询无法响应CSS的JavaScript代码更改

0 个答案: