按摩椅浏览器测试浏览器可视窗口大小
最近有点秀逗，以前的知识突然发现有些“印象派”了，今天赶紧补上。
这个测试报告其实是关于屏幕大小、可见区域大小及页面大小等相似概念的一个比较，看到网上有很多类似的文章，但是大多是转来转去，难免出现纰漏，甚至是自相矛盾，这里还是用事实说话，将各个相关方法的测试结果比较如下。
测试环境：1、本机分辨率：1280*800
2、测试浏览器：IE6/7 (IETester)
IE8
FF3.6
Chrome5.0
Safari 4.0
Opera 10.5
测试说明：
1、本次测试均针对各浏览器通用的方法，对于一些各自浏览器特有的，诸如FF的innerWidth/innerHeight/scrollMaxX/scrollMaxY本文并不涉及。
2、测试中的body样式为
body
{
margin: 0px;
padding: 0px;
width: 1000px;
height:1000px;
}
当然根据测试需要会进行width和height的相关调整
3、测试中页面内容的填充采用了空div的形式，HTML如下：
<div style="width:2000px;height:2000px;"></div>
当然根据测试需要会进行width和height的相关调整
测试项目
1、获取显示器大小（貌似这个不用测啊，写着放着吧^_^）
alert(window.screen.width);
alert(window.screen.height);
测试结果：结果均与本机分辨率一致，和浏览器无关。
------------------------------------------------------------------------------------------------------------------------------
2、浏览器可视窗口大小
alert(document.documentElement.clientWidth); //FF 1263 IE 1259 。。。
alert(document.documentElement.clientHeight); //FF 572 IE 609 。。。
为了省点纸，表示个意思好了，以FF为例，效果如下：
测试结果：如上所示，所有浏览器测试结果均为标识区域，因为浏览器的设计和工具使用问题，数值有所不同，但其宽高只会随浏览器窗口大小变化而变化。
------------------------------------------------------------------------------------------------------------------------------
3、页面大小
alert(document.body.clientWidth);
alert(document.body.clientHeight);
这个测试由于涉及到了页面，也就需要考虑页面整体(body)和页面内容的相关影响，故下面的测试不采用空div的形式，大家可以自行填充内容测试，且随测试调整，例如：
代码
2 内容<br />
3 内容<br />
4 内容<br />
5 内容<br />
6 内容<br />
7 内容<br />
8 内容<br />
9 内容<br />
10 内容<br />
11 内容<br />
12 内容<br />
13 内容<br />
14 内容<br />
15 内容<br />
16 内容<br />
17 内容<br />
18 内容<br />
19 内容<br />
20 内容<br />
21 内容<br />
22 内容<br />
23 内容<br />
24 内容<br />
25 内容<br />
26 内容<br />
27 内容<br />
28 内容<br />
29 内容<br />
30 内容<br />
31 内容<br />
32 内容<br />
33 内容<br />
34 内容<br />
35 内容<br />
当有body样式有内容时：
body样式比可见区域(即document.documetnElement.clientWidth/clientHeight中得到的数值，下同)小，如500px 500px，且页面内容没有超过可见区域时：
结果：所得值均与样式中设置的值一致
body样式比可见区域小，且页面内容溢出时：
结果：非IE6测试结果依然与body所设样式值一致，而IE6只有宽度与设置的值一致，而高度为可见区域高度+页面溢出内容的高度
body样式设置的比可见区域大时，如2000px 2000px时：
结果：所得值均与样式中设置的值一致
有body样式无内容时：
结果：不管body样式设置的值比可见区域大或者小，结果均为body样式中设置的值。
无body样式有内容时：
结果：所得宽度为页面可见区域宽度，不受内容影响，而高度则随内容高度的变化而变化。
无body样式无div时：
结果：所得宽度为页面可见区域宽度，但所得高度始终为0，因为当前页面没有任何内容。
------------------------------------------------------------------------------------------------------------------------------
4、documentElement滚动偏移测试
alert(document.documentElement.scrollWidth)
alert(document.documentElement.scrollHeight)
这个同样会受到样式的影响，所以分类测试如下：
有body样式有div时：
body样式设置的值比可见区域小(如 200px 200px)，且页面内容没有溢出时：
结果： IE8、FF：与可见区域宽高值一致
Opera、Chrome、Safari：宽度为可见区域宽度，高度为页面内容高度
IE6、7宽度受样式影响（此时为200），高度为页面内容高度
body样式设置的值比可见区域小(如 200px 200px)，且页面内容溢出时：
结果： 非IE6/7 ：宽度为可见区域宽度，高度为可见区域高度+溢出内容的高度
IE6/7：宽高均受样式影响，宽度为200，高度为内容高度
body样式设置的比可见区域大时，如2000px 2000px时：
结果：所得值均与样式中设置的值一致
有body样式无内容时：
body样式设置的比可见区域大，如2000px 2000px时：
结果：所得值均与样式中设置的值一致
body样式设置的值比可见区域小(如 200px 200px)时：
结果： IE8、FF：结果与可见区域值一致
Opera、Chrome、Safari：所得宽度为可见区域宽度，高度为所设置的样式高度(200px)
IE6、7：高宽均受样式影响，结果为 200px 200px
无body样式有内容时：
页面内容溢出时：
结果：所得宽度与可见区域宽度值一致，而高度则随页面内容高度变化而变化。
页面内容没有溢出时：
结果：IE8 、FF：所得值依然与可见区域值一致
Opera、Chrome、Safari 、IE6、7：所得宽度为可见区域，而高度则随页面内容高度变化而变化。
无body样式无内容时：
结果：IE6、7、8、FF：所得结果与可见区域内容一致
Opera、Chrome、Safari：所的结果中宽度与可见区域宽度一致，而高度则为0
------------------------------------------------------------------------------------------------------------------------------
5、body滚动偏移测试：
alert(document.body.scrollWidth)
alert(document. body.scrollHeight)
这个同样会受到样式的影响，所以分类测试如下：
有body样式有内容时：
body样式设置的值比可见区域小(如200px 200px)，且页面内容溢出时：
结果：IE 6、7、8 ：宽为200px 、高度随内容高度的变化而变化
Chrome safari ：宽度为可见区域宽度，高度随内容高度的变化而变化
Opera 、FF ：结果与样式值一致 200px 200px
body样式设置的值比可见区域小(如200px 200px)，且页面内容没有溢出时：
结果：IE6、7、8、FF ：宽度为200，高度随内容高度的变化而变化
Chrome、Safari：所得结果均与可见区域宽高一样
Opera、FF：结果与样式值一致 200px 200px
body样式设置的值比可见区域大时：
结果：所得值均与样式中设置的值一致
有body样式无内容时：
body样式设置的值比可见区域小(如200px 200px时：
结果：IE6、7、8 、Opera 、FF ：所得结果均与所设样式值一致
Chrome 、Safari：所得结果与可见区域值一致
无body样式，内容溢出时：
结果：宽度为可见区域宽度，高度随内容高度的变化而变化
无body样式，内容没有溢出时：
结果： IE6、7、8 Opera、FF ：宽度为可见区域宽度，高度随内容高度的变化而变化
Chrome、Safari：所得结果为可见区域宽高度
无body样式无内容时：
结果：Chrome 、Safari： 所得结果为可见区域宽高度
IE6、7、8 Opera、FF ：宽度为可见区域宽度，高度为0
------------------------------------------------------------------------------------------------------------------------------
弱弱的问一句，你晕了吗？如果你没晕的话，那恭喜你，其实我自己都很晕。。。所以如果测试中有错误的地方还望能够指出。。。
相信作为开发人员，恨不得人人都只用一种浏览器，但这并不现实，所以有了这么多比较，但比较并不是目的，目的是找出共性，方便我们更好的解决问题，
个人愚见：
1、在测试中考虑的一些情况貌似在实际中也没有什么参考价值，因为相信我们在实际开发中不会把body的宽高固定，介于此我们大可不必管body样式的影响，而且不同浏览器因为body的样式的关系，所得的最终结果也会有很大差异，；
2、window.screen.width/height针对本机屏幕的分辨率，因此使用价值不大；
3、document.documentElement.clientWidth/clientHeight通用性较强，如需要控制页面元素居中，防止页面内容溢出产生滚动条，都应该考虑使用其判断元素位置；
4、document.documentElement.scrollWidth/scrollHeight的测试结果各种浏览器的差异很大，因此参考价值不大；
5、document.body.clientWidth/clientHeight及document.body.scrollWidth/scrollHeight：这个的使用应该看页面的具体情况，而且暂时没有想到可以完全兼容各个浏览器的方法，哎。。。浏览器的兼容真是头疼。
不管你晕没晕，到此为止吧，欢迎拍砖。。。
按摩椅浏览器测试浏览器可视窗口大小相关推荐
- 设置页面高度为浏览器可视窗口大小
##设置页面高度为浏览器可视窗口大小## <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
- Kali Linux攻防系统（三：在Kali Linux系统中配置安全测试浏览器及系统清理备份）
任务三:配置安全测试浏览器及系统清理备份 3.1.汉化Firefox并安装安全插件 3.1.1.汉化Firefox浏览器,安装中文插件,并更改设置: 3.1.2.在浏览器附加组件管理器中查找" ...
- 用浏览器测试Get与Post Webservice，Post一直报405错误，而Get能够成功的原因与解决方法
用浏览器测试Get与Post Webservice,Post一直报405错误,而Get能够成功的原因与解决方法 参考文章: (1)用浏览器测试Get与Post Webservice,Post一直报40 ...
- web浏览器_你最常用的web测试-浏览器兼容性测试
如今,市面上的浏览器种类越来越多(尤其是在平板和移动设备上),这就意味着你所测试的站点需要在这些你声称支持浏览器上都能很好的工作. 同时,主流浏览器(IE,Firefox,Chrome,Opera,S ...
- html 判断页面支持canvas,HTML5 Canvas之测试浏览器是否支持Canvas的方法
在获取HTML页面上Canvas元素的引用后,我们需要测试一下该元素是否包含"上下文"(context).Canvas的上下文指的是由浏览器定义的用于绘画的平面.简单地说,如果上下 ...
- 火狐渗透测试浏览器_微软、火狐浏览器、Opera浏览器等主流平台纷纷布局IPFS:大势所趋...
如今中心化网络出现了非常多的弊端,所以去中心化IPFS顺势而生.微软.Brave.Opera.火狐等主流平台纷纷布局IPFS. 2020年2月10日,协议实验室发布了<IPFS 2020年项目重 ...
- Python selenium —— 用chrome的Mobile emulation模拟手机浏览器测试手机网页
很多人发现chrome有项功能,就是在开发者工具里能够模拟手机打开网页,便想能否用selenium对此进行自动化测试.答案当然是yes! 今天博主便给大家分享下如何用chrome的MobileEmul ...
- 关于node.js 和vue.js的安装、卸载、浏览器测试问题？
关于node.js 和vue.js的安装.卸载.浏览器测试问题? 最近忙于深入研究vue.js框架的适用问题,所以顺带也有必要系统的研究一下node.js是怎么一回事?! 闲话不多说,直接上文章链接: ...
- 【转载】浏览器测试工具有哪些 浏览器安全性能内核兼容测试工具推荐
浏览器测试工具有哪些 浏览器安全性能内核兼容测试工具推荐 时间:2019-03-01 15:12 来源:未知 作者:浏览器家园 浏览器测试工具有哪些 浏览器安全性能内核兼容测试工具推荐 好 ...
最新文章
- iOS开发中怎么样使用激光推送
- 手机网页 右边的空白区
- 【数据结构与算法】之深入解析“单词接龙II”的求解思路与算法示例
- 【通俗易懂】RPA是什么？
- mysql 更新时间加数字_Mysql实战45讲笔记：8、聚合函数count
- [洛谷P1951]收费站_NOI导刊2009提高（2）
- python requests 重试_我可以为requests.request设置最大重试次数吗？
- 吴恩达深度学习—— 3.4 多个例子中的向量化
- 不等式解集怎么取_6.初中数学：一个不等式的解集，都是另一个不等式的解，求a的取值范围？...
- axios token失效刷新token怎么重新请求_Token 刷新并发处理解决方案
- NCBI基本引物设计、（初学者）
- Latex 环境配置（TexLive + Texstudio）
- h5在线聊天室（附源码）
- android 玻璃背景,Android 弹窗毛玻璃背景实践
- spring-day04_JdbcTemplate声明式事务
- 用Python ttkbootstrap 带你制作账户注册信息界面
- Dev c++无法新建项目解决方法
- 一般纳税人，可以享受哪些税收优惠政策？
- 关于空心杯的SI2302驱动
- CAD图纸如何转换WMF图片格式？
热门文章
- python-pycharm控制台输出带颜色
- by截取字段 group_深入理解 group by【思考点滴】
- new 实例化对象是啥意思_new 关键字、实现一个new
- stm32读取目标芯片_使用stm32驱动RC522读IC卡（代码留言邮箱）
- 基于ISM的大数据在建筑领域中的应用障碍分析
- 【操作系统】分段内存管理
- 【软件工程】容错、高可用、灾备の辨析
- 遍历Map要选择好的遍历方式（洛谷P1097题题解，Java语言描述）
- Azure Site Recovery之启用复制
- Excel2013打开提示 文件格式和扩展名不匹配。文件可能已损坏或不安全。除非您信任其来源，否则请勿打开。是否仍要打开它?...