JavaScript獲取瀏覽器、元素、螢幕的寬高尺寸

JavaScript獲取瀏覽器、元素、螢幕的寬高尺寸

前言

有時候在獲取瀏覽器、元素、螢幕的尺寸，傻傻分不清。為了讓自己清晰認識，能夠快速確定自己需要哪個屬性，現在把這些尺寸屬性整理了一下。

一、瀏覽器視口的寬高

Window.innerWidth、Window.innerHeight

瀏覽器視口（viewport）寬度（單位：畫素），如果存在滾動條則包括它。

語法

let viewportWidth = window.innerWidth;
let viewportHeight = window.innerHeight;

備註

window.innerWidth和window.innerHeight是隻讀屬性，無預設值。

如果HTML中新增了以下內容，則頁面在移動端訪問的時候，視口寬高始終與邏輯解析度一致。
否則，移動端瀏覽器會在一個通常比螢幕更寬的虛擬”視窗“（視口）中渲染頁面。

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />

二、瀏覽器的寬高

Window.outerWidth、Window.outerHeight

整個瀏覽器視窗的高度（單位：畫素），包括側邊欄（如果存在）、視窗鑲邊（window chrome）和視窗調正邊框（window resizing borders/handles）。

語法

let outerWidth = window.outerWidth;
let outerHeight = window.outerHeight;

備註

window.outerWidth和window.outerHeight是隻讀屬性，無預設值。
在使用桌面端瀏覽器的模擬移動裝置檢視網頁時，這兩個屬性，依然指的是桌面端瀏覽器視窗的寬高。

三、元素內部的寬高

Element.clientWidth、Element.clientHeight

元素內部寬 = width + padding-left + padding-right - 豎直滾動條寬度
元素內部高 = height + padding-top + padding-bottom - 橫向滾動條高度

語法

let clientWidth = element.clientWidth;
let clientHeight = element.clientHight;

示例

四、元素的佈局寬高

Element.offsetWidth、Element.offsetHight

元素佈局寬 = width + padding-left + padding-right + 豎直滾動條寬度 + border-left + border-right
元素佈局高 = height + padding-top + padding-bottom + 橫向滾動條高度 + border-top + border-bottom

語法

let offsetWidth = element.offsetWidth;
let offsetHight = element.offsetHight;

示例

五、元素的內容寬高

Element.scrollWidth、Element.scrollHeight

元素的內容寬高，包括由於溢位導致內容在螢幕上下不可見的內容。

語法

let scrollWidth = element.scrollWidth;
let scrollHeight = element.scrollHeight;

示例

六、螢幕的寬高

Screen.width、Screen.height

螢幕解析度寬高。如果是移動裝置，則返回邏輯解析度寬高。

語法

let screenWidth = window.screen.width;
let screenHeight = window.screen.height;

七、螢幕的可用寬高

Screen.availWidth、Screen.availHeight

減去比如Windows的工作列等介面特性的螢幕的可用寬高。如果是移動裝置，則返回邏輯解析度寬高。

語法

let availWidth = window.screen.availWidth;
let availHeight = window.screen.availHeight;