窗口宽度在jQuery和CSS媒体查询之间不一致

Question

我在这里得到一些奇怪的结果，我无法理解。

在jQuery中，我通过以下方式记录窗口宽度：

console.log( $(window).width() );

在我的CSS中，我将背景颜色更改为红色：

@media only screen and (min-width: 768px) {

    body { background: red!important; }

}

然而，在Firebug中，控制台表示窗口宽度为756px宽，但CSS使背景变为红色，直到它达到最小宽度768px时才会发生。

请参阅此屏幕抓取以进一步说明：

任何人都可以向我解释为什么背景是红色的，CSS似乎不正确？是jQuery实际上是不正确的吗？

此外，它与垂直滚动条有什么关系吗？

Answer 1

你需要检查width的viewport，

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' ] };
}

Viewport Source

或者你可以像innerWidth()一样使用，

if($(window).innerWidth() <= 751) {
   $("body").css('background','red !important'); // background red
} else {
   $("body").removeAttr('style'); // remove style attribute
}

你可以使用matchmedia如果你不关心IE for egs，

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

对于所有浏览器，您可以尝试

if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}

见modernizr mq

Answer 2

差异是由滚动条的宽度引起的。

console.log( $(window).width() );

返回视口区域的宽度（没有滚动条），而媒体查询包括滚动条。

滚动条宽度因浏览器而异。 例如，在chrome中，背景颜色变化出现在747px，您可以在这个fiddle中尝试与其他浏览器一起查看差异。

Answer 3

//返回浏览器视口的宽度 $（window）.width（）;

//返回HTML文档的宽度 $（document）.width（）;

Css将采用HTML文档宽度。点击此链接https://api.jquery.com/width/

Answer 4

您应该根据跨浏览器解决方案的媒体查询检查窗口宽度，例如：

var isWindowWidthMatchingQuery = window.matchMedia("only screen and (min-width: 768px)").matches;

alert(isWindowWidthMatchingQuery ); // returns true or false

见支持表：http://caniuse.com/#search=matchMedia

Answer 5

不要使用JavaScript来检查视口宽度。它不必要地复杂并且容易出现不一致。相反，只需检查@ media-query依赖的CSS属性，即类.navbar-toggle，以便在使用可折叠引导程序导航栏时检查导航栏断点（由变量@ screen-phone设置）：

f($(".navbar-toggle").css("display") != "none") {
    alert("Yay! I'm consistent with bootstrap!");
}

如果要检查@ screen-tablet和@ screen-desktop断点，可以检查.container类的宽度，或bootstrap.css中依赖于合适的@ media-query的任何其他css选择器的宽度。当然你也可以用你自己的CSS来使用这种技术。

Answer 6

这个问题的更新：从jQuery 3.0开始，你现在可以使用$(window).outerWidth()来获得真正的窗口宽度，包括滚动条。它应该等于你使用CSS @media选择器所能做的

中断更改：窗口上的.outerWidth（）或.outerHeight（）包括滚动条宽度/高度

关于https://jquery.com/upgrade-guide/3.0/#breaking-change-outerwidth-or-outerheight-on-window-includes-scrollbar-width-height的更多信息