JavaScript获取浏览器、元素、屏幕的宽高尺寸
版权声明
转载请告知并注明来源作者
作者
:唐金健
网络昵称
:御焱
掘金
知乎
思否
专栏
:优雅的前端
前言
有时候在获取浏览器、元素、屏幕的尺寸,傻傻分不清。为了让自己清晰认识,能够快速确定自己需要哪个属性,现在把这些尺寸属性整理了一下。
一、浏览器视口的宽高
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;
JavaScript获取浏览器、元素、屏幕的宽高尺寸相关推荐
- JavaScript获取浏览器可视区域的宽高
JavaScript获取浏览器可视区域的宽高 在做项目的时候,我们常常需要对项目做一些优化,来提升页面响应的速度,比如进入可视区域后再发送请求获取数据或者是填充模板,这个时候就需要能够获取到浏览器的可 ...
- html浏览器宽度,JavaScript获取浏览器、元素、屏幕的宽高尺寸
版权声明 转载请告知并注明来源作者 作者:唐金健 网络昵称:御焱 掘金知乎思否专栏:优雅的前端 前言 有时候在获取浏览器.元素.屏幕的尺寸,傻傻分不清.为了让自己清晰认识,能够快速确定自己需要哪个属性 ...
- 在Vue中获取DOM元素的实际宽高
最近使用 D3.js 开发可视化图表,因为移动端做了 rem 适配,所以需要动态计算获取图表容器的宽高,其中涉及到一些原生DOM API的使用,避免遗忘这里总结一下. 一.获取元素 在 Vue 中可以 ...
- Html百分比设宽偏差大,absolute和relative元素 设置百分比宽高的差异
一般元素在页面所占的空间包括:magin border padding content.以前一直以为子元素设置百分比宽高都是以父元素的content值为基准计算的.但是当子元素的position不同时 ...
- javascript 快速获取图片实际大小的宽高
javascript 快速获取图片实际大小的宽高 简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813441.jpg'// 创建对象 var img = ...
- css设置元素的宽高为整数,为什么有的浏览器解析出来的宽高是小数?
如图: 因为把当前的标签页缩放显示了,所以浏览器会渲染出非整数的盒子尺寸 参考文章:css设置元素的宽高为整数,为什么有的浏览器解析出来的宽高是小数? - 孙北吉的回答 - 知乎
- android 获取屏幕的宽高
今天,讲讲android如何获取屏幕的宽高. // 通过WindowManager获取 DisplayMetrics dm = new DisplayMetrics(); getWindowManag ...
- Javascript 获取浏览器窗口中文档(视口)可用尺寸的方法
摘要: 由于浏览器的差异,许多信息的获取都要考虑兼容性,窗口中文档可用尺寸是一个经常需要用到的信息,由于浏览器不同甚至版本不同,获取的方法也不一样,本文介绍的函数能够兼容各种浏览器,获取这一信息.同时 ...
- 为什么有些内联(行内)元素可以设置宽高?
为什么有些内联(行内)元素如img.input可以设置宽高? 在说明之前我们先来了解一些定义. 块级元素和内联元素: ①块级元素总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示. 宽 ...
最新文章
- 对人工智能问题的提问
- 打开和关闭mysql服务器_启动和关闭MySQL服务器
- axios请求超时,设置重新请求的完美解决方法
- u-boot的Makefile分析
- python 实现的键盘记录器 小功能
- 宿主程序Crash与Lua是动态库还是静态库有关?
- python可以在多种平台运行、这体现了python语言的,Python可以在多种平台运行,这体现了Python语言的可移植特性...
- DBN原理及实践-TensorFlow
- 管理感悟:计算缺陷的权重
- 几句代码让Ios系统内核崩溃
- 163邮箱收不到邮件怎么办
- 科研为什么需要甘特图
- 上海万国驾校 科目三考试
- MC皮肤站和外置登陆教程
- 使用webmagic模拟post表单提交爬取易查分成绩
- 9月开学季CSDN高校俱乐部专家巡讲讲师招募
- 驾驭你的“职场布朗运动”
- java在进行流操作的close()方法
- java程序员找工作前需要准备的杀手锏有哪些?
- JavaScript基本概念
热门文章
- tensorflow tf.keras.losses.MeanSquaredError 均方差损失函数 示例
- vs2019 MFC 中 cannot open include file 'afxres.h' 问题解决方法
- tkinter的函数与实例
- Python基础总结(5)
- 二值网络--Structured Binary Neural Networks for Accurate Image Classification and Semantic Segmentation
- 使用pydub实现训练声音数据集加噪
- 报错解决:Failed to talk to init daemon.
- 解决IDEA报错:Lambda expressions not supported at language level '7'
- 退出命令_退出不褪色 离别不离志----石嘴山支队举行2019年度冬季消防员退出命令宣布大会...
- SalttSack自动化运维(四)——JINJA模块