版權聲明
轉載請告知并注明來源作者
作者：唐金健
網絡昵稱：禦焱
掘金知乎思否專欄：優雅的前端
前言
有時候在擷取浏覽器、元素、螢幕的尺寸，傻傻分不清。為了讓自己清晰認識，能夠快速确定自己需要哪個屬性，現在把這些尺寸屬性整理了一下。
一、浏覽器視口的寬高
Window.innerWidth、Window.innerHeight
浏覽器視口(viewport)寬度(機關：像素)，如果存在滾動條則包括它。
文法
let viewportWidth = window.innerWidth;
let viewportHeight = window.innerHeight;
備注
window.innerWidth和window.innerHeight是隻讀屬性，無預設值。
如果HTML中添加了以下内容，則頁面在移動端通路的時候，視口寬高始終與邏輯分辨率一緻。
否則，移動端浏覽器會在一個通常比螢幕更寬的虛拟”視窗“(視口)中渲染頁面。
二、浏覽器的寬高
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;