Question

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

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

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

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

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

    body { background: red!important; }

}

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

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

enter image description here

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

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

Answer 1

您需要检查width的{{1}}，

viewport

Viewport Source

或者你可以使用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' ] };
}

如果你不关心if($(window).innerWidth() <= 751) { $("body").css('background','red !important'); // background red } else { $("body").removeAttr('style'); // remove style attribute } egs，你可以使用matchmedia，

IE

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

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

请参阅modernizr mq

Answer 2

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

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

返回视口区域的宽度（宽度超出srcoll栏），而媒体查询包含滚动条。

滚动条宽度因浏览器而异例如，在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 ），使用可折叠的bootstrap导航栏时：

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

如果要查看 @ screen-tablet 和 @ screen-desktop 断点，可以检查.container类或任何其他CSS的宽度bootstrap.css中的选择器取决于合适的 @media -query。当然，您也可以将此技术用于自己的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

的更多信息

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

6 个答案: