5

我现在正在设置网站的移动端，我需要自定义 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');
    }
}
4

1 回答 1

1

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

这就是为您提供 15 像素宽的屏幕宽度的原因。

在基于 webkit 的浏览器中，它们不会。

如果你对这件事发生的原因感兴趣，我会引用这篇文章的评论：

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

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

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

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

于 2013-11-08T09:34:39.127 回答