七大主流版本浏览器关于获得页面相关区域的测试报告

　　最近有点秀逗，以前的知识突然发现有些“印象派”了，今天赶紧补上。

　　这个测试报告其实是关于屏幕大小、可见区域大小及页面大小等相似概念的一个比较，看到网上有很多类似的文章，但是大多是转来转去，难免出现纰漏，甚至是自相矛盾，这里还是用事实说话，将各个相关方法的测试结果比较如下。

　　

　　测试环境：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的形式，大家可以自行填充内容测试，且随测试调整，例如：

　　　

内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<br />
    内容<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：这个的使用应该看页面的具体情况，而且暂时没有想到可以完全兼容各个浏览器的方法，哎。。。浏览器的兼容真是头疼。

　　　 不管你晕没晕，到此为止吧，欢迎拍砖。。。

快速评论通道：

作者：Rocky翔
出处：http://www.cnblogs.com/RockyMyx/
本文版权归作者和博客园共有，欢迎转载，但请在文章页面明显位置给出原文连接，否则保留追究
法律责任的权利。