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中，媒体查询会将滚动条的宽度视为屏幕宽度。

这就是为您提供15px更宽的屏幕宽度。

在基于webkit的浏览器中，它们没有。

如果您对此事发生的原因感兴趣，我会引用this article :的评论

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

例如：＆gt; 500px overflow-y：scroll，＆lt; 500px overflow-y：hidden。将浏览器的大小调整为505px窗口宽度。由于滚动条从媒体查询使用的宽度中减去15个左右的像素，因此媒体查询会将您翻转为＆lt; 500，但是一旦你点击<500，滚动条就会消失，媒体查询会将你翻转到＆gt; 500，然后开始玩乐，因为现在你又有了一个滚动条，你就是＆lt; 500px而你得到了没有滚动条的那种风格......冲洗并重复，直到浏览器最终死亡。

现在，编写一些javascript来计算媒体查询的最大宽度，并且您有一个页面会在加载Chrome / Safari后立即崩溃。

我的猜测是规范是按照防止这种情况的方式编写的。 Firefox＆amp; Opera遵循规范，你不同意规范并不是他们的错。

CSS和jQuery有不同的宽度

1 个答案: