如何獲取屏幕寬度

在前端開發中，我們經常需要獲取屏幕寬度以便對網站進行響應式布局。本文將介紹多種方法來獲取屏幕寬度，並一一進行詳細闡述。

一、使用window對象的屬性獲取屏幕寬度

window.innerWidth
window.outerWidth

在JavaScript中，我們可以使用window對象的innerWidth屬性來獲取頁面顯示區域的寬度，outerWidth屬性來獲取包括滾動條等在內的整個窗口的寬度。

需要注意的是，這兩個屬性獲取的單位是像素（px），支持IE8及以上版本、Firefox、Chrome和Safari等瀏覽器。

例如：

console.log(window.innerWidth); // 頁面顯示區域的寬度
console.log(window.outerWidth); // 整個窗口的寬度

二、使用document.documentElement.clientWidth和document.body.clientWidth屬性獲取屏幕寬度

document.documentElement.clientWidth
document.body.clientWidth

在不同瀏覽器中，使用「innerWidth」和「outerWidth」有時候會返回錯誤的寬度值，此時我們可以嘗試使用document對象的clientWidth屬性。

需要注意的是，clientWidth屬性只適用於常規文檔元素，也就是說，如果一個元素設置了position:absolute或者設置了overflow:hidden，那麼這個元素的clientWidth屬性將返回0。

例如：

var width = document.documentElement.clientWidth || document.body.clientWidth;
console.log(width); // 屏幕寬度

三、使用jQuery獲取屏幕寬度

$(window).width()

如果你在項目中使用jQuery，那麼可以使用$(window).width()方法來獲取屏幕寬度。

需要注意的是，這種方法需要先引入jQuery庫。

例如：

var width = $(window).width();
console.log(width); // 屏幕寬度

四、使用媒體查詢獲取屏幕寬度

@media screen and (max-width: 768px) {
    /* CSS樣式 */
}

我們可以使用媒體查詢@media來獲取屏幕寬度，並根據不同屏幕寬度編寫不同的CSS樣式。

需要注意的是，媒體查詢只能返回布爾值，不支持返回具體的像素值。

例如：

// CSS樣式
@media screen and (max-width: 768px) {
    .container {
        width: 100%;
    }
}

// JS代碼
var width = window.matchMedia("(max-width: 768px)").matches;
console.log(width); // true或者false

五、使用CSS viewport單位獲取屏幕寬度

vw

CSS3提供了一種新的單位vw（Viewport Width），它表示視口寬度的百分比，其中1vw等於視口寬度的1%。

需要注意的是，vw單位是相對於視口寬度而不是屏幕寬度。同時，vw單位不得不面對兼容性問題，在某些移動設備上不支持。

例如：

.container {
    width: 100vw; // 寬度等於視口寬度
}

六、小結

通過本文的介紹，我們學習了多種方法來獲取屏幕寬度，包括JavaScript、jQuery、CSS媒體查詢和CSS viewport單位。

需要注意的是，不同的方法適用於不同的場景，我們需要根據實際情況進行選擇。