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

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

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 获取。

因此,综合上面的说明,我们可以用下面的方式获取浏览器窗口中文档(视口)可用尺寸:

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

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>