CSS和jQuery有不同的宽度

Question

我现在正在设置网站的移动端,我需要自定义CSS和移动设备的Javascript,所以在CSS我有规则使用@media screen and (max-width: 500px) {和Javascript我将使用if ($(window).width() < 500.

但是,如果我将浏览器的大小调整为精确像素,则移动CSS开始使用,console.log($(window).width());我得到485.

这是正常行为还是我做错了什么？

更新:

使用这个,值似乎是同步的,虽然目前只在Firefox中测试过.

var scrollBarWidth = false;


function mobileRules() {

    if (!scrollBarWidth) {
        var widthWithScrollBars = $(window).width();
        $('body').css('overflow', 'hidden');
        var widthNoScrollBars = $(window).width();
        $('body').css('overflow', 'scroll');
        scrollBarWidth = widthNoScrollBars - widthWithScrollBars;
        console.log('Width: '+widthWithScrollBars+'. Without: '+widthNoScrollBars+'. Scroll: '+scrollBarWidth);
    }

    console.log($(window).width()+scrollBarWidth+' vs '+globals.mobile_width);

    if ($(window).width()+scrollBarWidth < globals.mobile_width) {
        console.log('Running mobile rules in jQuery');
    }
}

Answer 1

在 Firefox 中，媒体查询将滚动条的宽度视为在屏幕宽度之内。

这就是使屏幕宽度增加 15 像素的原因。

在基于 webkit 的浏览器中则不然。

如果您对为什么会发生这种情况感兴趣，我将引用本文的评论：

Webkit 浏览器（不遵循规范）的一个问题是浏览器可能会遇到由媒体查询引起的无限循环情况，从而导致浏览器崩溃。

例如：>500px溢出-y：滚动，<500px溢出-y：隐藏。将浏览器窗口宽度调整为 505 像素。由于滚动条从媒体查询使用的宽度中减去 15 个左右的像素，媒体查询会将您翻转到 < 500，但是一旦您达到 <500，滚动条就会消失，媒体查询会将您翻转到 >500，然后有趣的事情就开始了，因为现在你又有了一个滚动条，并且你的距离<500px，并且你得到了没有滚动条的样式......冲洗并重复，直到浏览器最终死掉。

现在，编写一些 javascript 来计算媒体查询最大宽度，您的页面一旦加载就会使 Chrome/Safari 崩溃。

我的猜测是，规范的编写方式是为了防止出现这种情况。Firefox 和 Opera 遵循规范，您不同意规范并不是他们的错。