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;
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
如何让jpa 持久化时不校验指定字段
源文:https://www.toocruel.net/jpa-validate/ 怎么让jpa 持久化时不校验指定字段 本文提供全流程,中文翻译。 Chinar 坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 —— 高分辨率用户请根据需求调整网页缩放比例) Chinar —— 心分享、心创新!助力快速完成jpa 持久化时不校验指定字段/文字为新手节省宝贵的时间,避免采坑! 1 Problem —— 问题/需求 2 Wrong again —— 错误重现 3 SoluTion —— 解决方案 支持 May Be —— 搞开发,总有一天要做的事! 全文高清图片,点击即可放大观看 (很多人竟然不知道) 1 Problem —— 问题/需求 spring data jpa ,使用了 validate 校验 校验直接加在了要持久化实体类上,为了方便简洁并没有使用 DTO 做验证 但是有的校验仅在 Controller 层需要校验,持久化时不需校验 因为我把他声明为 @Transient 的了,如下 User 类: /// <summary> /// 用户类 /// </...
- 下一篇
Java异常简介
Java异常简介 java异常分为两大类,Checked异常和Runtime异常,Checked异常都是在编译阶段可以被处理的异常。 Checked异常和Runtime异常的区别和联系 Checked异常都是可以被处理的异常,在程序中必须显式地处理Checked异常,如果没有处理,那么编译就会报错。而Runtime异常可以不被显式的处理; 都是Exception的子类,继承了RuntimeException的就是Runtime异常,其他的就是Checked异常。 常见异常类 列举几个常见的运行时异常RuntimeException: IndexOutOfBoundException:数组越界异常; NullPointerException:空指针异常; ClassCastException:类转换异常; NumberFormatException:数字格式异常; ArithmeticException:运算异常。 列举几个非运行时异常(Checked异常): SQLException:SQL异常; IOException:IO异常; FileNotFoundException:文件找不...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS6,7,8上安装Nginx,支持https2.0的开启
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- CentOS关闭SELinux安全模块
- CentOS7设置SWAP分区,小内存服务器的救世主
- Docker安装Oracle12C,快速搭建Oracle学习环境
- Docker快速安装Oracle11G,搭建oracle11g学习环境