JavaScript獲取手機屏幕寬度

隨著智能手機的普及，越來越多的網站和APP需要根據不同設備的屏幕寬度進行自適應布局。而JavaScript可以通過獲取手機屏幕的寬度實現自適應。

下面我們通過舉例說明如何使用JavaScript獲取手機屏幕寬度。

使用window.innerWidth屬性

window.innerWidth

innerWidth屬性返回的是當前瀏覽器窗口的寬度，包括滾動條和邊框，但不包括工具欄和菜單欄。在移動端，瀏覽器窗口的寬度和手機屏幕的寬度相同，因此可以通過innerWidth獲取手機屏幕的寬度。

let screenWidth = window.innerWidth;
console.log(screenWidth);

上述代碼通過console.log()方法將獲取到的屏幕寬度輸出到瀏覽器控制臺。在一般情況下，console.log()方法會將內容輸出到瀏覽器控制臺的Console面板中。通過這種方式，我們可以查看手機屏幕的寬度。

使用screen.width屬性

screen.width

screen.width屬性返回的是設備屏幕的寬度，與瀏覽器窗口無關。在移動端，screen.width與innerWidth的值相同。

let screenWidth = screen.width;
console.log(screenWidth);

上述代碼同樣可以通過控制臺輸出獲取到的屏幕寬度。

使用document.documentElement.clientWidth屬性

document.documentElement.clientWidth

document.documentElement.clientWidth屬性返回的是當前文檔的可視區域寬度，不包括滾動條。在移動端，這個值同樣可以用來獲取手機屏幕的寬度。

let screenWidth = document.documentElement.clientWidth;
console.log(screenWidth);

上述代碼通過控制臺輸出獲取到的屏幕寬度。

總結

以上三種方法都可以用來獲取手機屏幕寬度。不過需要注意的是，不同瀏覽器對innerWidth和clientWidth的定義有所不同，所以在使用過程中需要根據實際情況選擇適宜的方法。

最后提醒大家，由于移動設備的屏幕尺寸和像素密度千差萬別，因此在做移動端自適應布局的時候，還需要結合CSS媒體查詢等技術進行更精細的調整。