小结js屏幕、浏览器、页面大小

    快放假过年了,公司最近也不忙,都在打酱油,趁这几天闲下来的时间,整理巩固一下相关疑问点,一直以来,对于js获取网页上的各种窗口大小,一直没有非常明确的理解和记忆,很多时候都是度娘和谷哥来解决,这次花了两天时间,在五种浏览器下分别进行了测试调试(分别是:IE9、Chrome 16、FireFox 9、Opera 11.6、Safari 5.1),整理自己的理解。

本文地址:http://www.cnblogs.com/vnii/archive/2012/01/13/2320842.html

声明:一下结论均是在标准模式<!DOCTYPE HTML> 下的测试结果,且测试浏览器分别为Windows7 下的IE9、Chrome 16、FireFox 9、Opera 11.6、Safari 5.1,以下为书写方便,分别描述为IE、Chrome、FireFox、Opera、Safari,不写版本号。

测试HTML
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Browser Size Test</TITLE>
<style>
body div
{
position
:absolute;
border
:solid 1px #ff0000;
width
:1500px;
height
:1500px;
filter
:alpha(Opacity=80);
-moz-opacity
:0.5;opacity: 0.5;z-index:100;
}
</style>
</HEAD>

<BODY>
<div>测试</div>
<br/>1
<br/>2
<br/>3
<br/>4
<br/>5
<br/>6
<br/>7
<br/>8
<br/>9
<br/>10
<br/>
<br/>
<br/>
<br/>00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000测试测试测试测试测试测试测试测试测试测试测试
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>......
</BODY>
</HTML>

 

js代码以及对于说表示的值如下:

//------页面内容宽度、高度--------
alert(document.body.scrollWidth);
//其中IE Firefox Opera:不识别绝对定位absolute的宽度,仅表示“非绝对定位”内容的宽度,且当浏览器可用宽度>“非绝对定位”内容宽度时候,表示的和offsetWidth相同,即=浏览器可用宽度-body的margin值-滚动条宽度
//其中Chrome Safari:页面内所有内容的宽度,且当浏览器宽度>所有内容宽度时候,表示的宽度为=浏览器可用宽度-滚动条宽度

alert(document.body.scrollHeight);
//IE Firefox Opera:不识别绝对定位absolute的容器高度,仅表示页面内“非绝对定位”内容的高度;
//Chrome Safari:页面内所有内容的高度,且当浏览器可用高度>所有内容高度时候,表示为浏览器高度

//[Begin新增 2012.1.16 14:40]
//此处结合上面的body.scrollXxx就可以给出 整个网页的大小=Max(document.body.scrollXxx,document.documentElement.scrollXxx)
//------网页文档对象宽度、高度--------
alert(document.documentElement.scrollWidth);
//IE Firefox Opera:页面内所有内容的宽度,且当浏览器宽度>所有内容宽度时候,表示的宽度为=浏览器可用宽度-滚动条宽度
//Chrome Safari:不识别绝对定位absolute的宽度,仅表示“非绝对定位”内容的宽度,且当浏览器可用宽度>“非绝对定位”内容宽度时候,表示宽度=浏览器可用宽度-滚动条宽度
alert(document.documentElement.scrollHeight);
//IE Firefox Opera:页面内所有内容的高度,且当浏览器可用高度>所有内容高度时候,表示为浏览器高度
//Chrome Safari:不识别绝对定位absolute的容器高度,仅表示页面内“非绝对定位”内容的高度;
//[End新增]


//------页面内容宽度、高度--------
alert(document.body.offsetWidth);
//页面内容宽度=浏览器可用宽度-body的margin值-滚动条宽度,其中滚动条没有时表示0
alert(document.body.offsetHeight);
//页面内容高度,均不识别绝对定位absolute的容器高度,仅表示页面内“非绝对定位”内容的高度


//------浏览器内容可见区域大小--------
alert(document.documentElement.clientWidth);
//浏览器内容可见区域宽度-滚动条宽度
alert(document.documentElement.clientHeight);
//浏览器内容可见区域高度-滚动条宽度

//------滚动条偏离大小--------
alert(document.body.scrollTop);
//Chrome Firefox Safari Opera支持,滚动条滚动的高度
alert(document.body.scrollLeft);
//Chrome Firefox Safari Opera支持,滚动条滚动的左右位移
alert(document.documentElement.scrollTop);
//IE支持,滚动条滚动的高度
alert(document.documentElement.scrollLeft);
//IE支持,滚动条滚动的左右位移

//------浏览器可用区域大小--------
alert(window.innerWidth);
alert(window.innerHeight);
//ie:浏览器可用区域大小,滚动条无影响 [修正 2012.1.16 15:15](IE8 以及以前 都不支持,结果为undefined)
//Chrome Firefox Safari Opera:浏览器可用区域大小,滚动条无影响

//------屏幕大小--------
alert(window.screen.availWidth);
alert(window.screen.availHeight);
//当前屏幕大小(可用区域),window.screen.height减去任务栏等所占的大小

//------屏幕大小--------
alert(window.screen.width);
alert(window.screen.height);
//当前屏幕大小(分辨率值)

 

本来打算画个图来说明的,发现ps没装。。。其它的图片处理工具也不太好画,所以暂时就以上面的文字描述为主,后续有时间再画个图上传进行说明。

以上有不同结果或者描述补充的,请大家不吝指教。。。

posted on 2012-01-13 15:33  忧郁的匹格  阅读(6103)  评论(11编辑  收藏  举报