版权声明
转载请告知并注明来源作者
作者
:唐金健
网络昵称
:御焱
掘金
知乎
思否
专栏
:优雅的前端
前言
有时候在获取浏览器、元素、屏幕的尺寸,傻傻分不清。为了让自己清晰认识,能够快速确定自己需要哪个属性,现在把这些尺寸属性整理了一下。
一、浏览器视口的宽高
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;