<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>屏幕分辨率_www.jb200.com</title>
<style>
*{padding:0;margin:0;font-size:12px;font-family:Arial}
#content{width:280px;padding:10px;background:#FFCC00;float:left}
b{color:red}
</style>
</head>
<body>
<div id="content"></div>
<script type="text/javascript">
/**
* 屏幕/显示器分辨率，以及各种高宽的检测
* edit www.jb200.com
* date 2013/5/8 星期三
*/
function showWidth(){
var s = " ";
s += "<p>网页可见区域宽："+ document.body.clientWidth;
s += "</p><p>网页可见区域高："+ document.body.clientHeight;
s += "</p><p>网页可见区域宽："+ document.body.offsetWidth + " (包括边线和
滚动条的宽)";
s += "</p><p>网页可见区域高："+ document.body.offsetHeight + " (包括边线的宽)";
s += "</p><p>网页正文全文宽："+ document.body.scrollWidth;
s += "</p><p>网页正文全文高："+ document.body.scrollHeight;
s += "</p><p>网页被卷去的高："+ document.body.scrollTop;
s += "</p><p>网页被卷去的左："+ document.body.scrollLeft;
s += "</p><p>网页正文部分上："+ window.screenTop;
s += "</p><p>网页正文部分左："+ window.screenLeft;
s += "</p><p><b>屏幕分辨率的宽："+ window.screen.width;
s += "</b></p><p><b>屏幕分辨率的高："+ window.screen.height;
s += "</b></p><p>屏幕可用工作区高度："+ window.screen.availHeight;
s += "</p><p>屏幕可用工作区宽度："+ window.screen.availWidth;
s += "</p><p>你的屏幕设置是"+ window.screen.colorDepth + " 位彩色 ";
s += "</p><p>你的屏幕设置"+ window.screen.deviceXDPI + " 像素/英寸 </p>";
document.getElementById('content').innerHTML = s;
}
window.onload = function(){
showWidth();
}
window.onresize = function(){
showWidth();
}
window.onscroll = function(){
showWidth();
}
</script>
</body>
</html>
