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

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

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

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

测试环境&＃xff1a;window7  chrome

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

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

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

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

关于网页的宽度和高度

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

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

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