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;