动态显示屏幕宽度高度及相关信息
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<title>动态屏幕信息</title>
<meta name="author" content="yujianyue, admin@ewuyi.net">
<meta name="copyright" content="www.12391.net">
<style type="text/css">
/*自定义css*/
input[type=text]{width:254px;}
input[type=submit]{width:120px;}
h1{font-size:24px;color:red;}
h3{font-size:20px;color:blue;}
table{border-left:1px solid #a2c6d3;border-top:3px solid #0180CF; margin:0px auto;}
table td{border-right:1px solid #a2c6d3;border-bottom:1px solid #a2c6d3;padding:5px;word-wrap:break-word;word-break:break-all;}
</style>
<script type="text/javascript">
function $(Obj){
return document.getElementById(Obj);
}
function Trim(Str){
return Str.replace(/(^\s*)|(\s*$)/g,"");
}
</script >
</head>
<body>
<div id="demo"></div>
<script type="text/javascript">
function getInfo(){
var s = "<table cellspacing='0'><caption><h1>动态显示屏幕信息</h1></caption>";
s += "<tr><td>当前时间娃哈哈</td><td>"+ new Date().getTime() +"</td></tr>\n";
s += "<tr><td>网页可见区域宽</td><td>"+ document.body.clientWidth+"</td></tr>\n";
s += "<tr><td>网页可见区域高</td><td>"+ document.body.clientHeight+"</td></tr>\n";
s += "<tr><td>网页可见区域宽</td><td>"+ document.body.offsetWidth + " (包括边线和滚动条的宽)"+"</td></tr>\n";
s += "<tr><td>网页可见区域高</td><td>"+ document.body.offsetHeight + " (包括边线的宽)"+"</td></tr>\n";
s += "<tr><td>网页正文全文宽</td><td>"+ document.body.scrollWidth+"</td></tr>\n";
s += "<tr><td>网页正文全文高</td><td>"+ document.body.scrollHeight+"</td></tr>\n";
s += "<tr><td>网页被卷去的高(ff)</td><td>"+ document.body.scrollTop+"</td></tr>\n";
s += "<tr><td>网页被卷去的高(ie)</td><td>"+ document.documentElement.scrollTop+"</td></tr>\n";
s += "<tr><td>网页被卷去的左</td><td>"+ document.body.scrollLeft+"</td></tr>\n";
s += "<tr><td>网页正文部分上</td><td>"+ window.screenTop+"</td></tr>\n";
s += "<tr><td>网页正文部分左</td><td>"+ window.screenLeft+"</td></tr>\n";
s += "<tr><td>屏幕分辨率的高</td><td>"+ window.screen.height+"</td></tr>\n";
s += "<tr><td>屏幕分辨率的宽</td><td>"+ window.screen.width+"</td></tr>\n";
s += "<tr><td>屏幕可用工作区高度</td><td>"+ window.screen.availHeight+"</td></tr>\n";
s += "<tr><td>屏幕可用工作区宽度</td><td>"+ window.screen.availWidth+"</td></tr>\n";
s += "<tr><td>你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+"</td></tr>\n";
s += "<tr><td>你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"+"</td></tr>\n";
s += "</table>\n";
$("demo").innerHTML = ''+s;
}
setInterval('getInfo();',1000);
</script>
</body>
</html>