HTML页面中JavaScript能获取到的各种屏幕大小信息
在HTML页面中,通过JavaScript代码访问 window 对象,能够获取到很多表征屏幕大小的信息,下面列举并加以区分。
window 对象中的屏幕信息
window.innerheight、 window.innerwidth
- 只读属性,以像素计
- 浏览器窗口的文档显示区的高度和宽度
- 不包括菜单栏、工具栏以及滚动条等的高度
- IE8以下不支持这些属性,用 document.documentElement 或 document.body (与 IE 的版本相关)的 clientWidth 和 clientHeight 属性作为替代
window.outerheight、 window.outerwidth
- 只读属性,以像素计
- 整个浏览器窗口的高度和宽度
- 常用于设置 window.open 打开的窗口宽度和高度
- IE8以下不支持此属性,且没有提供替代的属性
window.screenLeft、 window.screenTop、 swindow.creenX、 window.screenY
- 只读属性,整数
- 浏览器窗口的左上角在屏幕上的的 x 坐标和 y 坐标
- IE、Safari 和 Opera 支持 screenLeft 和 screenTop
- Firefox 和 Safari 支持 screenX 和 screenY
window.screen.availHeight、 window.screen.availHeightavailWidth
- 以像素计
- 浏览器的屏幕的可用高度和宽度
- Windows中不包括分配给半永久特性(如屏幕底部的任务栏)的垂直空间
window.screen.height、 window.screen.width
- 以像素计
- 显示器屏幕的高度和宽度
- 调整显示设备的分辨率会发生变化
- 少部分移动设备上面的值并不是真正的显示屏大小,如三星S8
document 对象中的屏幕信息
很复杂!真的很复杂!这些值根据是否指定 DOCTYPEIE 、网页是否超过窗口宽度 有关系。而且FireFox,Chrome这些主流浏览器里面针对元素的 clientWidth、 offsetWidth、 scrollWidth信息技术都有各自的标准。下面简单说明作为参考。详细新在实际应用中进行调整。
下面的 document.body 和 document.documentElement 类似,body也是一个DOM element。
document.body.clientHeight、 document.body.clientWidth
- 浏览器中可显示内容区域的高度和宽度
- document.documentElement 表示元素的可见高度和宽度
- 与页面内容多少无关
- 滚动条不算在内,padding算在内
- clientHeight = topPadding + bottomPadding+ height - scrollbar.height
document.body.offsetHeight、 document.body.offsetWidth
- 包括边线的网页内容可见区域高度和宽度
- offsetHeight = clientHeight + 滚动条 + 边框
document.body.scrollHeight、 document.body.scrollWidth
- 网页正文全文高度和宽度
- 不同的浏览器中 scrollHeight 和 clientHeight 的大小关系不一样
解决方案
可以使用下面的方式折中取 scrollWidth 和 clientWidth :
var scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
下面列举通用HTML元素 element 的大小属性信息:
- element.clientHeight : 元素的可见高度
- element.clientWidth : 元素的可见宽度
- element.offsetHeight : 元素的高度
- element.offsetWidth : 元素的宽度
- element.offsetLeft : 元素的水平偏移位置
- element.offsetTop : 元素的垂直偏移位置
- element.offsetParent : 元素的偏移容器
- element.scrollHeight : 元素的整体高度
- element.scrollLeft : 元素左边缘与视图之间的距离
- element.scrollTop : 元素上边缘与视图之间的距离
- element.scrollWidth : 元素的整体宽度
由于本人才疏学浅,不乏遗漏错误,欢迎大家指出。
原文出处:http://uusama.com/496.html
HTML页面中JavaScript能获取到的各种屏幕大小信息的更多相关文章
- vue中如何让多个echarts随屏幕大小变化
在vue项目中使用Echarts 一般window.onsize在页面中只能存在一个. 如何在一个页面中多个echarts使用window.onresize? myChart 可以放在Data ...
- vue2.0 在页面中使用process获取全局路径的时候 报错 process is not defined
如果是刚配置好的全局变量需要 重新启动一下vue才能通过proccess.env.xxx 获取到 如果想在html中使用 需要在data中声明一个变量 然后在vue生命周期中 将process.env ...
- 在页面跳转的时候,在跳转后的页面中使用js 获取到 页面跳转的url中携带的参数。
common.js代码 //获取URL中的参数..等等function getQueryString(name){var reg = new RegExp("(^|&)"+ ...
- Android原生代码拦截H5 Web页面中JavaScript弹窗/弹框
<html> <body> <script> function showAlert(){ alert("JavaScript - hello , worl ...
- 对于HTML页面中CSS, JS, HTML的加载与执行过程的简单分析
来自 https://blog.csdn.net/u011088260/article/details/79563315 最近在研究HTML页面中JavaScript的执行顺序问题.在Java ...
- GetConsoleScreenBufferInfo 函数--获取控制台屏幕缓冲区信息
GetConsoleScreenBufferInfo函数 来源:https://msdn.microsoft.com/en-us/library/ms683171(v=vs.85).aspx 作用 获 ...
- 使用JavaScript设置、获取父子页面中的值
一:获取父页面中的值 有二种方法windows.open()和windows.showModalDialog() 1.windos.open(URL,name,reatures,replace) 再父 ...
- jQuery基础学习5——JavaScript方法获取页面中的元素
给网页中的所有<p>元素添加onclick事件 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- 一行JavaScript代码获取页面中的所有超链接地址
因为我喜欢收集Web开发类的网址,平时对网址就很敏感. 我总结了一下我收集网址的几个阶段: 1.纯手工阶段,傻傻的阶段. 在这个阶段,主要是收集一些在页面中展现出来的网址,就是说,如果网址出现在HTM ...
随机推荐
- 设计模式的征途—9.组合(Composite)模式
树形结构在软件中随处可见,比如操作系统中的目录结构,公司组织结构等等,如何运用面向对象的方式来处理这种树形结构是组合模式需要解决的问题.组合模式通过一种巧妙的设计方案来使得用户可以一致性地处理整个树形 ...
- 【python】__new__和__init__区别
原文:http://blog.csdn.net/cnmilan/article/details/8849680 __new__:创建对象时调用,返回当前对象的一个实例__init__:创建完对象后调用 ...
- Android内存泄露的原因
(一)释放对象的引用,误将一个本来生命周期短的对象存放到一个生命周期相对较长的对象中,也称“对象游离“.隐蔽的内部类(Anonymous Inner Class): mHandler = new Ha ...
- Maven工程下报错:The superclass "javax.servlet.http.HttpServlet" was not found on the Java Build Path
Maven工程下,webapp下面新建index.jsp文件,报如下错误. 原因很简单,没有安装如下maven依赖包: <dependencies> <!-- JSP相关 --> ...
- Tomcat多域名访问
对于域名解析相信很多小伙伴都了解过,就是我们在万网购买一个域名,比如hpugs.com,然后呢?我们希望域名与我们的服务器绑定,然后通过域名直接访问我们的项目,这就是本篇要和大家一起探讨的问题.下面开 ...
- unity3d资源打包总结
http://www.manew.com/blog-33734-12973.html unity 打包的时候会把下面几个文件资源打进apk或者ipa包里面 1. Asset下的所有脚本文件 2. As ...
- JAVA提高十八:Vector&Stack深入分析
前面我们已经接触过几种数据结构了,有数组.链表.Hash表.红黑树(二叉查询树),今天再来看另外一种数据结构:栈. 什么是栈呢,我们先看一个例子:栈就相当于一个很窄的木桶,我们往木桶里放东西,往外拿东 ...
- c语言的内存分析
1. 进制 1. 什么是进制 ● 是一种计数的方式,数值的表示形式 汉字:十一 十进制:11 二进制:1011 八进制:13 ● 多种进制:十进制.二进制.八进制.十六进制.也就是说,同一个 ...
- 第六届蓝桥杯软件类省赛题解C++/Java
第六届蓝桥杯软件类省赛题解C++/Java 1[C++].统计不含4的数字统计10000至99999中,不包含4的数值个数.答:暴力循环范围内所有数字判断一下就是了,答案是52488 1[Java]. ...
- 项目实战7—Mysql实现企业级数据库主从复制架构实战
Mysql实现企业级数据库主从复制架构实战 环境背景:公司规模已经形成,用户数据已成为公司的核心命脉,一次老王一不小心把数据库文件删除,通过mysqldump备份策略恢复用了两个小时,在这两小时中,公 ...