JavaScript 获取浏览器的显示区域大小信息
|
区域说明 |
JavaScript Code |
|
网页可见区域宽 |
document.body.clientWidth |
|
网页可见区域高 |
document.body.clientHeight |
|
网页可见区域宽(包括边线的宽) |
document.body.offsetWidth |
|
网页可见区域高(包括边线的宽) |
document.body.offsetHeight |
|
网页正文全文宽 |
document.body.scrollWidth |
|
网页正文全文高 |
document.body.scrollHeight |
|
网页被卷去的高 |
document.body.scrollTop |
|
网页被卷去的左 |
document.body.scrollLeft |
|
网页正文部分上 |
window.screenTop |
|
网页正文部分左 |
window.screenLeft |
|
屏幕分辨率的高 |
window.screen.height |
|
屏幕分辨率的宽 |
window.screen.width |
|
屏幕可用工作区高度 |
window.screen.availHeight |
|
屏幕可用工作区宽度 |
window.screen.availWidth |
写个小例子测试一下，看看自己的浏览器现在的大小是多少，这个对于页面resize后的布局非常有用！
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html><head> <title>Screen Size Test</title>
<script language="JavaScript" type="text/JavaScript">
function displayScreenSize()
{
var bodyWidth =document.body.clientWidth; //网页可见区域宽 var bodyHeight =document.body.clientHeight; //网页可见区域高 var bodyWidthWithBorder =document.body.offsetWidth; //网页可见区域宽(包括边线的宽) var bodyHeightWithBorder=document.body.offsetHeight; //网页可见区域高(包括边线的宽) var bodyWidthWithScroll =document.body.scrollWidth; //网页正文全文宽 var bodyHeightWithScroll=document.body.scrollHeight; //网页正文全文高 var bodyTopHeight =document.body.scrollTop; //网页被卷去的上边距 var bodyLeftWidth =document.body.scrollLeft; //网页被卷去的左边距 var windowTopHeight =window.screenTop; //网页正文部分上边距 var windowLeftWidth =window.screenLeft; //网页正文部分左边距 var screenHeight =window.screen.height; //屏幕分辨率的高 var screenWidth =window.screen.width; //屏幕分辨率的宽 var screenAvailHeight =window.screen.availHeight; //屏幕可用工作区高度 var screenAvailWidth =window.screen.availWidth; //屏幕可用工作区宽度 var Str="<p>"; Str+="网页可见区域宽:<span class='data'>"+bodyWidth+"px</span><br>"; Str+="网页可见区域高:<span class='data'>"+bodyHeight+"px</span><br>"; Str+="网页可见区域宽(包括边线的宽):<span class='data'>"+bodyWidthWithBorder+"px</span><br>"; Str+="网页可见区域高(包括边线的宽):<span class='data'>"+bodyHeightWithBorder+"px</span><br>"; Str+="网页正文全文宽:<span class='data'>"+bodyWidthWithScroll+"px</span><br>"; Str+="网页正文全文高:<span class='data'>"+bodyHeightWithScroll+"px</span><br>"; Str+="网页被卷去的上边距:<span class='data'>"+bodyTopHeight+"px</span><br>"; Str+="网页被卷去的左边距:<span class='data'>"+bodyLeftWidth+"px</span><br>"; Str+="网页正文部分上边距:<span class='data'>"+windowTopHeight+"px</span><br>"; Str+="网页正文部分左边距:<span class='data'>"+windowLeftWidth+"px</span><br>"; Str+="屏幕分辨率的高:<span class='data'>"+screenHeight+"px</span><br>"; Str+="屏幕分辨率的宽:<span class='data'>"+screenWidth+"px</span><br>"; Str+="屏幕可用工作区高度:<span class='data'>"+screenAvailHeight+"px</span><br>"; Str+="屏幕可用工作区宽度:<span class='data'>"+screenAvailWidth+"px</span><br>"; Str+="</p>" document.getElementById('dispaly').innerHTML=Str;
}</script> <style type="text/css"><!--A:link { text-decoration: none; color: #ff0000; font-weight: normal; 
} A:visited { text-decoration: none; color: #ff6666; font-weight: normal; } A:active { text-decoration: none; color: #ff0000; font-weight: normal; } A:hover { text-decoration: underline; color: #ff0000; font-weight: normal; } .title { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 24px; font-weight: bold; color: #990000;}.display { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px;}.data { color: #FF0000; font-weight: bold;}.foot { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #5e5e5e; }--> </style></head><body onResize="javascript:displayScreenSize();" onLoad="javascript:displayScreenSize();"><span class="title">Screen Size Test</span><hr align="left" size="1" noshade><span class="display"> Now we get the screen size about this browser
</span><br><span class="display" id="dispaly"></span><hr align="left" size="1" noshade><p align="right"> <span class="foot"> Screen Size Test by <a href="http://apolloge.cnblogs.com/">apolloge</a> </span></p> </body></html>
