版權宣告
前言
有時候在獲取瀏覽器、元素、螢幕的尺寸，傻傻分不清。為了讓自己清晰認識，能夠快速確定自己需要哪個屬性，現在把這些尺寸屬性整理了一下。
一、瀏覽器視口的寬高
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;
複製程式碼