Question

我在一些jquery的帮助下制作了一些漂亮的CSS3动画，并且在使这些动画功能响应的过程中，我偶然发现了一件奇怪的事情，非常奇怪。

我呼叫的媒体查询状态

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

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

时触发

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

我必须承认我完全被这个迷惑了，任何人都有任何好主意吗？：）

Answer 1

在@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 2

我遇到了同样的问题，我相信这与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 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/

CSS媒体屏幕宽度与jQuery（窗口）.width（）

3 个答案: