<title>测试当前浏览器尺寸</title>检测viewport尺寸和页面正文尺寸本来网上的资料代码很多,可是实际用起来发现都有问题,经过一行行的调试,终于发现是
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xxxxxxx.dtd">
|
执行标准造成的javascript的差异,xhtml1-strict.dtd当然是首选的标准了,又搜了一下,呵呵,有人早就说过这个问题了,
不过说的人不多.
在xhtml1-strict.dtd下经过FF和IE6的测试发现最终有意义的是
|
document.documentElement.clientWidth
document.documentElement.clientHeight
document.documentElement.scrollWidth
document.documentElement.scrollHeight
|
这四个,具体执行下面的例子就明白了,其他浏览器的情况我没有测试,有感兴趣的朋友可以帮忙测测,谢谢!
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>测试当前浏览器尺寸</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
*{
margin:0px auto;
padding:0px;
}
body{
width:1002px;
background-color:#FFFFFF;
}
.wh{
width:800px;
float:left;
}
</style>
</head>
<body>
<div id='wh' class='wh'></div>
<div class='wh'>
填充<br>
填充<br>
填充<br>
填充<br>
填充<br>
填充<br>
填充<br>
填充<br>
填充<br>
填充<br>
填充<br>
填充<br>
填充<br>
填充<br>
填充<br>
填充<br>
</div>
<SCRIPT LANGUAGE="JavaScript">
function ss(){
var s = "";
s += "<br>网页可见区域宽document.body.clientWidth："+ document.body.clientWidth;
s += "<br>网页可见区域高document.body.clientHeight："+ document.body.clientHeight;
s += "<br>网页可见区域宽document.body.offsetWidth："+ document.body.offsetWidth +" (包括边线的宽)";
s += "<br>网页可见区域高document.body.offsetHeight："+ document.body.offsetHeight +" (包括边线的宽)";
s += "<br>网页正文全文宽document.body.scrollWidth："+ document.body.scrollWidth;
s += "<br>网页正文全文高document.body.scrollHeight："+ document.body.scrollHeight;
s += "<br>网页正文部分上window.innerWidth："+ window.innerWidth;
s += "<br>网页正文部分左window.innerHeight："+ window.innerHeight;
s += "<br>屏幕可用工作区高度document.documentElement.clientWidth："+ document.documentElement.clientWidth;
s += "<br>屏幕可用工作区宽度document.documentElement.clientHeight："+ document.documentElement.clientHeight;
s += "<br>屏幕可用工作区高度document.documentElement.scrollWidth:"+ document.documentElement.scrollWidth
s += "<br>屏幕可用工作区宽度document.documentElement.scrollHeight:"+ document.documentElement.scrollHeight;
document.getElementById('wh').innerHTML=s;
};
ss();
window.onresize=ss;
</SCRIPT>
</body>
</html>
|
