我在这里得到了一个我不太明白的奇怪结果。

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

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

在我的 CSS 中,我将背景颜色更改为红色:
@media only screen and (min-width: 768px) {

    body { background: red!important; }

}

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

请参阅此屏幕截图以获取进一步说明:

谁能向我解释为什么背景是红色的并且 CSS 看起来不正确?它实际上是不正确的 jQuery 吗?

另外,它与垂直滚动条有什么关系吗?

最佳答案

你需要检查 widthviewport 像,

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
}

如果您不关心 egs 的 IE,则可以使用 matchmedia
function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

对于所有浏览器,您可以尝试
if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}

modernizr mq

关于jquery - jQuery 和 CSS 媒体查询之间的窗口宽度不一致,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/23243374/

10-12 12:24
查看更多