jQuery的窗口的寬度不等於CSS的窗寬

我使用的CSS和JS代碼的下面兩個部分：jQuery的窗口的寬度不等於CSS的窗寬

@media (max-width: 720px) { 
    // a code to make arrows in a carousel disappear 
} 

if(jQuery(window).width() <= 720){ 
    // a code to make arrows in the carousel stop working 
}

與他們的問題是，究竟寬度= 738px而不是720像素，後者執行。我懷疑這是因爲Chrome瀏覽器的垂直滾動條的寬度等於18px。

有沒有辦法統一呢？我希望這些操作在所有瀏覽器中同時發生，無論滾動條的寬度如何。

測試（瀏覽器時，是@ 720像素和CSS已經執行）：

jQuery(document).innerWidth() = 703 
jQuery(window).innerWidth() = 703 
jQuery(document).width() = 703 
jQuery(window).width() = 703 
jQuery('body').width() = 703 
jQuery('html').width() = 703

來源

2013-08-30 Atadj

我不得不解決同樣的問題，而以前，到目前爲止，我發現的最正確的解決方案是使用媒體q ueries將實際的窗口大小傳遞給Javascript。你必須遵循以下步驟：

添加一個隱藏的元素到您的網頁，
使用媒體查詢，以改變該元素的max-width財產，
回讀通過JavaScript該元素的max-width財產。

例如，下面的元素添加到您的網頁：

<div id="currentMedia"></div>

然後寫下面的CSS規則：

#currentMedia { 
    display: none; 
} 

@media (max-width: 720px) { 
    /* Make arrows in the carousel disappear... */ 

    #currentMedia { 
     max-width: 720px; 
    } 
}

然後，從JavaScript端，你可以寫：

if (parseInt(jQuery("#currentMedia").css("max-width"), 10) <= 720) { 
    // Make arrows in the carousel stop working... 
}

而且它將是準確的，無論滾動酒吧的大小，因爲價值來自同一個媒體查詢觸發旋轉木馬的消失。

我在所有主要的瀏覽器上測試了這個解決方案，並且它給出了正確的結果。

來源

2013-08-30 07:43:40

這很聰明，謝謝！那麼，有沒有簡單的jQuery方法來做到這一點？ – Atadj

@Aadad，不是我所知，沒有。 –

你會發現什麼樣的屬性都支持哪些瀏覽器on this page on quirksmode.org大總結。

最好的辦法是抓住頁面中的元素（使用document.body，其中支持document.body或document.getElementById或其他），然後遍歷它的offsetParent鏈以找到最頂層的元素，然後檢查該元素的clientWidth和clientHeight。

innerWidth文檔

innerWidth()說這種方法並不適用於window和document對象;對於這些，使用.WIDTH（）

嘗試

How can I get the browser's scrollbar sizes?

從Alexandre Gomes Blog

function getScrollBarWidth() { 
    var inner = document.createElement('p'); 
    inner.style.width = "100%"; 
    inner.style.height = "200px"; 

    var outer = document.createElement('div'); 
    outer.style.position = "absolute"; 
    outer.style.top = "0px"; 
    outer.style.left = "0px"; 
    outer.style.visibility = "hidden"; 
    outer.style.width = "200px"; 
    outer.style.height = "150px"; 
    outer.style.overflow = "hidden"; 
    outer.appendChild (inner); 

    document.body.appendChild (outer); 
    var w1 = inner.offsetWidth; 
    outer.style.overflow = 'scroll'; 
    var w2 = inner.offsetWidth; 
    if (w1 == w2) w2 = outer.clientWidth; 

    document.body.removeChild (outer); 

    return (w1 - w2); 
};

在你的代碼

if(jQuery(window).width()-getScrollBarWidth(); <= 720){ 
    // a code to make arrows in the carousel stop working 
}

來源

2013-08-30 07:24:35

[文檔]（http://api.jquery.com/innerWidth/）爲'innerWidth（）'說*此方法不適用於'window'和'document'對象;對於這些，使用'.width（）'而不是*。 –

@FrédéricHamidi更正了ty :) –

我試過這個，但我認爲它不起作用。我用'console.log（）'打印這個值，結果如下：http://gyazo.com/ccba301317849b000666efe3e5bdc201.png（當viewport是734px時，它認爲它是717px。JavaScript比CSS媒體查詢早執行。 – Atadj

如果你使用Bootstrap> 3，那麼我會建議你一些東西。

引導程序在其Css中預裝了.container類。它的變化與@media查詢。所以我的工作代碼示例如下。

function detectWidth(){ 
    var width = $('.container').eq(0).outerWidth() ; 
    console.log(width); 
    if(width<750){ 
    // do something for XS element 
    }else if(width>=750 && width<970){ 
    // do something for SM element 
    }else if(width>=970 && width<1170){ 
     // do something for MD element 
    }else{ 
    // do something for LG element 
    }

}

來源

2014-08-30 04:22:34 Enziz

我意識到這是一個古老的線程，但我認爲它仍然可以從這個回答中受益。

var width = window.outerWidth;

這會給你窗口的寬度，包括滾動條，這是媒體查詢使用的，我相信。

來源

2015-01-07 11:10:36 koppelaar

有點過時線程，但我發現這個解決方案

function getWidth(){ 
    return ((window.innerWidth > 0) ? window.innerWidth : screen.width); 
}

來源

2016-09-21 20:51:52 Dihgg

jQuery的窗口的寬度不等於CSS的窗寬

回答

相關問題