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中，媒體查詢會將滾動條的寬度視為屏幕寬度。

這就是為您提供15px更寬的屏幕寬度。

在基於webkit的瀏覽器中，他們沒有。

如果你對這件事發生的原因感興趣，我會引用這篇文章的評論：

Webkit瀏覽器（不遵循規范）的一個問題是瀏覽器可能遇到由媒體查詢引起的無限循環條件，從而導致瀏覽器崩潰。

例如：> 500px overflow-y：scroll，<500px overflow-y：hidden。 將瀏覽器的大小調整為505px窗口寬度。 由於滾動條從媒體查詢使用的寬度中減去15個左右的像素，因此媒體查詢會將您翻轉為<500，但只要您點擊<500，滾動條就會消失，媒體查詢會將您翻轉到> 500，然后有趣的開始，因為現在你再次有一個滾動條，你是<500px，你得到的風格沒有滾動條...沖洗並重復，直到瀏覽器最終死亡。

現在，編寫一些javascript來計算媒體查詢的最大寬度，並且您有一個頁面會在加載Chrome / Safari后立即崩潰。

我的猜測是，規范是按照防止這種情況的方式編寫的。 Firefox和Opera遵循規范，你不同意規范並不是他們的錯。