jQuery和CSS媒体查询不同步

Question

我一直试图理解窗口宽度的确定方式,我想知道它是否与CSS和jQuery不同.

例如,我有CSS媒体查询:

@media (max-width: 979px) {
  /*my css here*/
}

还有一些jQuery:

if ($(window).width() < 979) {
  //my jQuery here
}

我希望如下: - 当浏览器调整大小并刷新为980px时,上述两个都将被忽略 - 当浏览器调整大小并刷新为978px时,上述两个都将激活.

然而,我发现 - jQuery和CSS直到大约964px及以下才开始. - 有时(如果我启用了window.resize)jQuery和CSS以单独的宽度(相隔几个像素)启动.

任何人都可以了解这里发生的事情吗？

顺便说一下,我将窗口宽度基于Firebug的布局查看器.

Answer 1

问题与滚动条宽度有关:window.innerWidth将返回CSS媒体查询读取的正确值.请注意,$(window).innerWidth()将返回错误的值.

对于跨浏览器的解决方案,可以使用如下函数:

function viewport() {
    var e = window, a = 'inner';
    if (!('innerWidth' in window )) {
        a = 'client';
        e = document.documentElement || document.body;
    }
    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}

var value = viewport().width;

Answer 2

$(document).width()认为你可能想用

$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document

http://api.jquery.com/width/