关于使用“JS获取屏幕,浏览器,网页高度宽度”的个人思考 F

摘要:
在js开发中,获取屏幕或文档的宽度和高度是不可避免的。在回答这个问题之前,考虑一下不可用的宽度和高度。这里主要是任务栏的影响。将任务栏设置为自动隐藏时,document.body.scrollLeft/document.body.scrollTop是展开页面的宽度和高度。clientWidth实时显示当前宽度,而clientHeight显示一些不确定的值。

  在js开发中免不了获取屏幕或文档的宽度高度问题。今天在搜索引擎中搜索时,看到最多的就是这篇文章

关于使用“JS获取屏幕,浏览器,网页高度宽度”的个人思考 F第1张

这张图片已经被转载了很多了,我想说的是,在转载之前能否先思考下,是否完全懂了,而不是囫囵吞枣(虽然我也记录过)。

这个图虽说比较详细,但看起来有点复杂,而且是否完全正确,我目前没找到官方说明。于是我决定自己测测

测试环境:window7  chrome

屏幕分辨率的高:window.screen.height 
屏幕分辨率的宽:window.screen.width 
屏幕可用工作区高度:window.screen.availHeight 
屏幕可用工作区宽度:window.screen.availWidth

上面这四个属性是正确的,个人再补充点,我的屏幕是1280x1024的,所以window.screen.height 、window.screen.width 分别为1280、1024,然后是

window.screen.availHeight、window.screen.availWidth,什么是可用的宽度和高度。回答这个问题之前先想想什么是不可用的宽度和高度,这里主要是任务栏的影响

关于使用“JS获取屏幕,浏览器,网页高度宽度”的个人思考 F第2张

当你把任务栏设置成自动隐藏后,那么可用宽和高就和屏幕的宽和高一样了,而且你也可以试试把任务栏位置固定在左侧,那么可用宽度就会减少。

关于网页的宽度和高度

  document.body.scrollLeft/document.body.scrollTop是卷去的宽和高,而document.body.scrollWidth/document.body.Height是整个文档的宽和高,和document.width/document.height 相等。

  但是document.body的clientWidth和clientHeight有些问题了,但调整浏览器窗口大小时,clientWidth实时显示目前的宽度,而clientHeight显示的值总有些不确定,有的页面clientHeight和scrollHeight相等,有的前者小一些,但所有的document.body.scrollHeight和document.height 都相等(表示文档的高度)

  最后是document.documentElement.clientWidth和document.documentElement.clientHeight实时显示当前窗口的宽和高

免责声明:文章转载自《关于使用“JS获取屏幕,浏览器,网页高度宽度”的个人思考 F》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇手把手教你uiautomator_android自动化测试第一个示范webpack4 自学笔记三(提取公用代码)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

Android实现简单的检测手机自由落体关闭屏幕

实现功能如下:在背景运行app,检测到自由落体状态时,熄灭屏幕,可重复测试。 1. 检测自由落体动作  需要使用到加速度感应器 TYPE_ACCELEROMETER SensorManager mSensorManager; private float mLastX; private float mLastY; private float mLastZ;...

linux系统挂掉问题的分析

玩linux系统,经常遇到的一件事就是做了某个操作之后系统会突然挂掉,这要怎么办? 1. 首先我们要看log,看看是否会留下一些蛛丝马迹,比如PC/LR是否有留下来。 PC是ARM的一个寄存器,即程序计数器,他记下的是当前程序执行的位置; LR是link register,它保存的是当前函数的返回地址, 所以我们可以善用PC/LR来帮助我们查找问题的根源。...

SAP 实例- 页签tabsrip

屏幕页签:项目上有一需求,对标准TCODE 一个屏幕增加一个页签。于是做了个例子。 下面屏幕有两个页签。    我们来看一下屏幕结构。100屏幕是主屏幕,101,102是子屏幕,对应页签test1,test2. 看一下屏幕属性 100屏幕:  101屏幕和102屏幕属性相同:  看一下屏幕制作器:区域1 是两个push button; 区域2是tab...

VirtualBox 在Win10上的蓝屏问题

今天也是第一次使用VirtualBox ,因为比VM更轻量,当然主要还是版权,结果装完虚拟机后,每次打开虚拟机就蓝屏,系统报错。 这是出现在WIN10上的问题啊。 解决办法: 找到Control Panel -> Programs and Features -> Turn Windows features on or off 看到Hyper-V...

鼠标移入移出冒泡事件解决 Jquery mouseenter和mouseleave

这两天在在做一个菜单,ul下多个li菜单,当鼠标移出ul的时候将菜单隐藏。 想到这移入移出,想到mouseover和mouseout事件,但是问题来了,我要的是鼠标移出ul的时候才触发mouseout事件,但是我鼠标移出ul子元素li的时候也出触发ul上注册的mouseout事件,这样就达不到想要的效果。 后来跟同事讨论才发现,jQuery本身还有另外两个...

解决SpringBoot 报错 Error parsing HTTP request header

一、SpringBoot 项目,使用自带tomcat 1、问题描述 接收 application/x-www-form-urlencoded Post 参数 data={"data":[{"id_dev":"CSB000001","state":"online","on_ts":1526004805}, {"id_dev":"CSB000001","sta...