javascript - CSS 媒体查询和 Javascript/jQuery 不匹配

Question

在我的 CSS 中，我有一个像这样的媒体查询:

@media (min-width: 800px) { /* styles */ }

然后在我的 jQuery 中，我瞄准窗口宽度并执行一些操作。

编辑:根据下面的答案，我已经更改了此函数，但我的 JS 和 CSS 仍然没有对齐。该问题已通过使用已接受答案中指定的 Modernizr 函数解决。

$(window).resize(function() {
    var viewportWidth = $(window).width();
    if (viewportWidth >= 800) {
        // do something
    }
});

问题是，当 jQuery 在 800 像素或以上执行 bang 时，CSS 在 740 像素处启动。

这些不对齐是否存在已知问题？或者我的页面上是否有某些内容影响了 CSS，为什么它是 740px 而不是 800px？也许我应该使用其他东西来代替 $(window)？

编辑:我已经在 Safari 中进行了测试，效果非常好。在 Chrome 和 Firefox 中，jQuery 函数在 800 像素上运行，CSS 也是如此。但在 Chrome 中，CSS 实际上在 740 像素后运行，即使媒体查询是 800 像素 - 我怎样才能让它们完美对齐？

Answer 1

您可以使用Modernizr至 execute the media query在 JS 中(mq() 方法将返回一个 bool 值):

$(window).resize(function() {
    if (Modernizr.mq('(min-width: 800px)')) {
        // do something
    }
});