CSS media screen width与jQuery(window).width()

Question

我正在制作一些漂亮的CSS3动画，在一些jquery的辅助下，在使这些动画函数响应的过程中，我偶然发现了一件奇怪的事情，确实非常奇怪。

我调用的媒体查询状态

@media screen and (max-width: 1024px)

但是当我使用JavaScript调用窗口宽度时，它显示它实际上在窗口宽度为1009px时触发

console.log('window.size: '+$(document).width());

我必须承认，我完全被这个问题搞糊涂了，谁有什么好主意？:)

Answer 1

我也遇到过同样的问题，我相信这与jQuery有关，我发现的解决方案可能比使用整个函数更轻量级

window.innerWidth 

而不是使用jQuery来选择主体/窗口宽度。

下面是它在没有jQuery选择器http://jsfiddle.net/wf40d79x/的情况下工作的一小部分

使用的

$(window).resize(function() {
    console.log(window.innerWidth);
});

使用jQuery选择器http://jsfiddle.net/4bgzf1Lp/2/，它被打破了

使用的

$(window).resize(function() {
    console.log($(window).width());
});

你会在控制台中看到，当媒体查询弹出时，屏幕会缩小到600px，只使用javascript，控制台就会与宽度一致，而使用jQuery，宽度会小17px。

希望这能有所帮助。

Answer 2

在@Pete给我指出了正确的方向，并被我在某个地方找到的一小段代码所吸引后，我想出了这个：

(如果我记得我在哪里找到了下面的内容，我会给提出下面内容的人一个荣誉，但把它贴在这里，以防其他人需要类似的解决方案)

function scrollBarWidth() {
    jQuery("html").css("overflow", 'hidden');
    var width = jQuery("html").width();
    jQuery("html").css("overflow", 'scroll');
    width -= jQuery("html").width(); 
    if(!width){
        width = document.body.offsetWidth - document.body.clientWidth;
        jQuery("body").css("overflow", '');
    }
    return width; 
}

Answer 3

我遇到了一个很好的解决方案，可以验证哪个媒体文件是活动的。添加一个选择器，用于更改css媒体文件中的状态或字体，并签入js以检查状态是否已更改。

.width-verify{
    display: none;
}

@media only screen and (min-width: 768px) {
    .width-verify {
        display: block;
    }
}

JS：

if ($('.width-verify').css('display') === 'block') {
    //...
}

感谢http://www.acoupleofnerds.com.au/2014/09/3-ways-fix-jquerys-window-width-method-matching-media-queries/