JavaScript获取浏览器、元素、屏幕的宽高尺寸

Amio 发布于2019-08-22 17:22 / 2441人阅读

摘要：一浏览器视口的宽高浏览器视口宽度单位像素，如果存在滚动条则包括它。二浏览器的宽高整个浏览器窗口的高度单位像素，包括侧边栏如果存在窗口镶边和窗口调正边框。语法示例六屏幕的宽高屏幕分辨率宽高。

转载请告知并注明来源作者  
作者：唐金健  
网络昵称：御焱  
掘金知乎思否专栏：优雅的前端

前言

有时候在获取浏览器、元素、屏幕的尺寸，傻傻分不清。为了让自己清晰认识，能够快速确定自己需要哪个属性，现在把这些尺寸属性整理了一下。

一、浏览器视口的宽高 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;

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95108.html

浏览器元素尺寸与位置查询指南

摘要：前言这篇文章主要介绍了有关浏览器中获取坐标以及尺寸的几种途径算是比较全的一篇文章了在浏览器中获取元素的坐标以及尺寸是非常容易的有非常多种方式来完成这些需求但是杂乱的和很多兼容处理导致了浏览器中没有直接的方式来获取我们想要的结果仔细想想这个问前言这篇文章主要介绍了有关浏览器中获取坐标以及尺寸的几种途径,算是比较全的一篇文章了. 在浏览器中获取元素的坐标以及尺寸是非常容易的,有非常多种...

lei___ 2019-08-26 13:44 评论0 收藏0
获取屏幕宽高width(),outerWidth,innerWidth,clientWidth的区别

摘要：基本介绍与与获得的是屏幕可视区域的宽高，不包括滚动条与工具条。纵向滚动条宽度横向滚动条高度与与获得的是加上工具条与滚动条窗口的宽度与高度。兼容性和属性与和属性以及以下不支持。基本介绍 $(window).width()与$(window).height() $(window).width()与$(window).height()：获得的是屏幕可视区域的宽高，不包括滚动条与工具条。 $...

woshicixide 2019-08-21 12:02 评论0 收藏0
移动端开发系列——像素与viewport

摘要：目录移动端开发的基本观点像素基础知识原理解析弹性布局响应式设计的运用移动端的事件库的使用移动端开发的基本观点移动端开发的意义移动端用户使用量市场需求市场供给公司需要移动端开发人才工资高，就业易涌现大波程序猿到了猴年马月，工资才会目录移动端开发的基本观点像素基础知识 viewport原理解析弹性布局响应式设计 1rem的运用移动端的事件 zepto库的使用移动端开发的...

JayChen 2019-08-30 15:53 评论0 收藏0
移动端开发系列——像素与viewport

摘要：目录移动端开发的基本观点像素基础知识原理解析弹性布局响应式设计的运用移动端的事件库的使用移动端开发的基本观点移动端开发的意义移动端用户使用量市场需求市场供给公司需要移动端开发人才工资高，就业易涌现大波程序猿到了猴年马月，工资才会目录移动端开发的基本观点像素基础知识 viewport原理解析弹性布局响应式设计 1rem的运用移动端的事件 zepto库的使用移动端开发的...

lingdududu 2019-08-01 16:21 评论0 收藏0