--------------------------------------------------------------
点此浏览示例文件
--------------------------------------------------------------
本文所说的“浏览器窗口中文档(下面简称“视口”)可用尺寸”指浏览器中文档显示区域的尺寸,不包括标题栏、工具栏、滚动条等内容。
在处理这一信息时,不同浏览器和同一浏览器不同版本中有一些差别,说明如下:
(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>
-
注意!这一信息的获取时临时的,当浏览器窗口本身大小被改变时,此信息也将跟随改变!