javascript获取浏览器宽度和高度

测试浏览器及版本:IE8、FF5、Chrome12

屏幕分辨率:1366 x 768

文档声明:

 

1.获取屏幕分辨率(所有浏览器一致):

屏幕横向分辨率:window.screen.width   1366

屏幕纵向分辨率:window.screen.height   768

 

2.网页可见区域宽度和高度

宽度:document.body.clientWidth

高度:document.body.clientHeight

 

有文档声明时:宽度为网页可见区域高度,高度可能小于可见区高度

无文档声明时:宽度为网页可见区域高度,高度大于等于可见区高度

 

3.屏幕可用工作区域宽度和高度

宽度:window.screen.availWidth   屏幕横向分辨率-任务栏宽度(如果任务栏在左侧或右侧)

高度:window.screen.availHeight  屏幕纵向分辨率-任务栏高度(如果任务栏在顶部或底部)

 

4网页正文宽度和高度

宽度:document.body.scrollWidth

高度:document.body.scrollHeight

 

有文档声明:IE8和FF5高度可能小于可见区域高度,Chrome12大于等于可见区域高度

无文档声明:IE8高度可能小于可见区域高度,FF5和Chrome12大于等于可见区域高度

 

5.网页可见区域宽度和高度(包括边线)

宽度:document.body.offsetWidth

高度:document.body.offsetHeight

 

有文档声明:全部可能小于可见区域高

无文档声明:FF5高度可能小于可见区域高度,IE8和Chrome12大于等于可见区域高度

 

有文档声明的测试代码:

Html代码   收藏代码
  1. >  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>测试1title>  
  6. <script type="text/javascript">  
  7. function show(){  
  8.     var s = "";  
  9.     s += "网页可见区域宽度:"+document.body.clientWidth;  
  10.     s += "\n网页可见区域高度:"+document.body.clientHeight;  
  11.     s += "\n网页可见区域宽度(包括边线):"+document.body.offsetWidth;  
  12.     s += "\n网页可见区域高度(包括边线):"+document.body.offsetHeight;  
  13.     s += "\n网页正文宽度:"+document.body.scrollWidth;  
  14.     s += "\n网页正文高度:"+document.body.scrollHeight;  
  15.     s += "\n屏幕可用工作区域宽度:"+window.screen.availWidth;  
  16.     s += "\n屏幕可用工作区域高度:"+window.screen.availHeight;  
  17.     s += "\n屏幕分辨率宽度:"+window.screen.width;  
  18.     s += "\n屏幕分辨率高度:"+window.screen.height;  
  19.     alert(s);  
  20. }  
  21. script>  
  22. head>  
  23.   
  24. <body style="margin:0;border:0">  
  25. <div style="width:2000px;height:90px;margin:0">  
  26. <a onclick="show()" href="#">点击a>  
  27. div>  
  28. body>  
  29. html>  

 

无文档声明的测试代码

Html代码   收藏代码
  1. <html>  
  2. <head>  
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  4. <title>测试2title>  
  5. <script type="text/javascript">  
  6. function show(){  
  7.     var s = "";  
  8.     s += "网页可见区域宽度:"+document.body.clientWidth;  
  9.     s += "\n网页可见区域高度:"+document.body.clientHeight;  
  10.     s += "\n网页可见区域宽度(包括边线):"+document.body.offsetWidth;  
  11.     s += "\n网页可见区域高度(包括边线):"+document.body.offsetHeight;  
  12.     s += "\n网页正文宽度:"+document.body.scrollWidth;  
  13.     s += "\n网页正文高度:"+document.body.scrollHeight;  
  14.     s += "\n屏幕可用工作区域宽度:"+window.screen.availWidth;  
  15.     s += "\n屏幕可用工作区域高度:"+window.screen.availHeight;  
  16.     s += "\n屏幕分辨率宽度:"+window.screen.width;  
  17.     s += "\n屏幕分辨率高度:"+window.screen.height;  
  18.     alert(s);  
  19. }  
  20. script>  
  21. head>  
  22.   
  23. <body style="margin:0;border:0">  
  24. <div style="width:2000px;height:90px;margin:0">  
  25. <a onClick="show()" href="#">点击a>  
  26. div>  
  27. body>  
  28. html>  

你可能感兴趣的:(javascript获取浏览器宽度和高度)