Javascript 获取浏览器窗口中文档（视口）可用尺寸的方法

摘要: 由于浏览器的差异，许多信息的获取都要考虑兼容性，窗口中文档可用尺寸是一个经常需要用到的信息，由于浏览器不同甚至版本不同，获取的方法也不一样，本文介绍的函数能够兼容各种浏览器，获取这一信息。同时，文章中对浏览器处理这一信息的差异也做了详细说明。

归类: Javascript,

关键词: window, 文档, offsetHeight, clientHeight, innerHeight, 视口, 窗口,

<script type="text/javascript"> </script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script> name="google_ads_frame" marginwidth="0" marginheight="0" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-9963302116430362&dt=1179544831671&lmt=1179544831&prev_fmts=468x15_0ads_al&format=468x15_0ads_al&output=html&correlator=1179544831359&channel=7590920726&pv_ch=7590920726%2B&url=http%3A%2F%2Fwww.codebit.cn%2Fpub%2Fhtml%2Fjavascript%2Ftip%2Fget_viewport_info%2F&color_bg=FFFFFF&color_text=666666&color_link=669933&color_url=7C6E3E&color_border=FFFFFF&ref=http%3A%2F%2Fwww.baidu.com%2Fs%3Flm%3D0%26si%3D%26rn%3D10%26ie%3Dgb2312%26ct%3D0%26wd%3DoffsetHeight%26pn%3D10%26cl%3D3&cc=100&flash=9&u_h=768&u_w=1280&u_ah=738&u_aw=1280&u_cd=16&u_tz=480&u_java=true" frameborder="0" width="468" scrolling="no" height="15" allowtransparency="allowtransparency">

由于浏览器的差异，许多信息的获取都要考虑兼容性，窗口中文档可用尺寸是一个经常需要用到的信息，由于浏览器不同甚至版本不同，获取的方法也不一样，本文介绍的函数能够兼容各种浏览器，获取这一信息。同时，文章中对浏览器处理这一信息的差异也做了详细说明。


--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------


本文所说的“浏览器窗口中文档（下面简称“视口”）可用尺寸”指浏览器中文档显示区域的尺寸，不包括标题栏、工具栏、滚动条等内容。

在处理这一信息时，不同浏览器和同一浏览器不同版本中有一些差别，说明如下：

（1）在 IE4、IE5 和 没有声明 DOCTYPE 的 IE6 中，视口的这一信息保存在“body”元素中，可以用 document.body.offsetWidth / offsetHeight 获取，

（2）在声明了DOCTYPE 的 IE6 中 ，视口的这一信息保存在 document.documentElement 中，可以用 document.documentElement.clientWidth / clientHeight 获取。

（3）除了 IE 以外的所有浏览器都将此信息保存在 window 对象中，可以用 window.innerWidth / innerHeight 获取。


因此，综合上面的说明，我们可以用下面的方式获取浏览器窗口中文档（视口）可用尺寸：

Javascript:

    
    

      
      

       
        
      
      

      
      

       
       <script type=
       
       "text/javascript"> 
      
      

      
      

       
       // 说明：Javascript 获取浏览器窗口中文档（视口）可用尺寸的方法 
      
      

      
      

       
       // 整理：http://www.CodeBit.cn 
      
      

      
      

       
        
      
      

      
      

       
       function getViewportInfo
       
       (
       
       ) 
      
      

      
      

       
       { 
      
      

      
      
    
       
       var w = 
       
       (window.
       
       innerWidth
       
       ) ? window.
       
       innerWidth : 
       
       (document.
       
       documentElement && document.
       
       documentElement.
       
       clientWidth
       
       ) ? document.
       
       documentElement.
       
       clientWidth : document.
       
       body.
       
       offsetWidth; 
      
      

      
      
    
       
       var h = 
       
       (window.
       
       innerHeight
       
       ) ? window.
       
       innerHeight : 
       
       (document.
       
       documentElement && document.
       
       documentElement.
       
       clientHeight
       
       ) ? document.
       
       documentElement.
       
       clientHeight : document.
       
       body.
       
       offsetHeight; 
      
      

      
      
    
       
       return 
       
       {w:w,h:h
       
       }; 
      
      

      
      

       
       }; 
      
      

      
      

       
       </script> 
      
      

      
      

       
        
      
      

注意！这一信息的获取时临时的，当浏览器窗口本身大小被改变时，此信息也将跟随改变！