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 回答