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

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


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


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

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

（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:

 function getBrowserWindowSize(){
  var de = document.documentElement ;
  return {
    width:( window.innerWidth
      || (de&&de.clientWidth)
      || document.body.offsetWidth
       ),
    height:( window.innerHeight
         || (de&&de.clientHeight)
      || document.body.offsetHeight
      )
    };
 }

 

 

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};

}