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

版權聲明

轉載請告知並註明來源做者
做者： 唐金健
網絡暱稱： 御焱
掘金 知乎 思否 專欄： 優雅的前端

前言

有時候在獲取瀏覽器、元素、屏幕的尺寸，傻傻分不清。爲了讓本身清晰認識，可以快速肯定本身須要哪一個屬性，如今把這些尺寸屬性整理了一下。

1、瀏覽器視口的寬高

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" />

2、瀏覽器的寬高

Window.outerWidth、Window.outerHeight

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

語法

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

備註

window.outerWidth和window.outerHeight是隻讀屬性，無默認值。
在使用桌面端瀏覽器的模擬移動設備查看網頁時，這兩個屬性，依然指的是桌面端瀏覽器窗口的寬高。

3、元素內部的寬高

Element.clientWidth、Element.clientHeight

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

語法

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

示例

4、元素的佈局寬高

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;

示例

5、元素的內容寬高

Element.scrollWidth、Element.scrollHeight

元素的內容寬高，包括因爲溢出致使內容在屏幕上下不可見的內容。

語法

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

示例

6、屏幕的寬高

Screen.width、Screen.height

屏幕分辨率寬高。若是是移動設備，則返回邏輯分辨率寬高。

語法

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

7、屏幕的可用寬高

Screen.availWidth、Screen.availHeight

減去好比Windows的任務欄等界面特性的屏幕的可用寬高。若是是移動設備，則返回邏輯分辨率寬高。

語法

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