摘要:由于浏览器的差异，许多信息的获取都要考虑兼容性，窗口中文档可用尺寸是一个经常需要用到的信息，由于浏览器不同甚至版本不同，获取的方法也不一样，本文介绍的函数能够兼容各种浏览器，获取这一信息。同时，文章中对浏览器处理这一信息的差异也做了详细说明。 归类:Javascript,
关键词:window,文档,offsetHeight,clientHeight,innerHeight,视口,窗口,
收藏本页到：由于浏览器的差异，许多信息的获取都要考虑兼容性，窗口中文档可用尺寸是一个经常需要用到的信息，由于浏览器不同甚至版本不同，获取的方法也不一样，本文介绍的函数能够兼容各种浏览器，获取这一信息。同时，文章中对浏览器处理这一信息的差异也做了详细说明。--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------
本文所说的“浏览器窗口中文档（下面简称“视口”）可用尺寸”指浏览器中文档显示区域的尺寸，不包括标题栏、工具栏、滚动条等内容。
在处理这一信息时，不同浏览器和同一浏览器不同版本中有一些差别，说明如下：
（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 获取浏览器窗口中文档（视口）可用尺寸的方法 // 整理： 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>
注意！这一信息的获取时临时的，当浏览器窗口本身大小被改变时，此信息也将跟随改变！
