JavaScript获取浏览器窗口与页面尺寸完整指南

浏览器窗口与页面尺寸属性概览

获取网页可见区域尺寸时，可使用document.body.clientWidth获取宽度，使用document.body.clientHeight获取高度。若需包含边线宽度，则分别使用document.body.offsetWidth和document.body.offsetHeight。获取网页正文全文尺寸时，使用document.body.scrollWidth和document.body.scrollHeight。页面滚动位置可通过document.body.scrollTop获取垂直滚动距离，通过document.body.scrollLeft获取水平滚动距离。此外，window.screenTop和window.screenLeft分别表示网页正文部分距离屏幕左上角的垂直和水平偏移量。屏幕分辨率信息可通过window.screen.height和window.screen.width获取，而屏幕可用工作区高度和宽度则分别对应window.screen.availHeight和window.screen.availWidth。

DOM元素精确定位与滚动参数

在HTML元素精确定位中，scrollHeight用于获取对象的滚动高度，scrollWidth用于获取对象的滚动宽度。scrollLeft设置或获取对象左边界与窗口中目前可见内容最左端之间的距离，scrollTop设置或获取对象最顶端与窗口中可见内容最顶端之间的距离。offsetHeight获取对象相对于版面或由父坐标offsetParent属性指定的父坐标的高度，offsetLeft获取对象相对于版面或由offsetParent属性指定的父坐标的计算左侧位置，offsetTop获取对象相对于版面或由offsetTop属性指定的父坐标的计算顶端位置。事件坐标方面，event.clientX和event.clientY表示相对文档的水平与垂直坐标，event.offsetX和event.offsetY表示相对容器的水平与垂直坐标。垂直方向滚动值可通过document.documentElement.scrollTop获取，而相对文档的水平坐标加上垂直方向滚动量的计算方式为event.clientX加上document.documentElement.scrollTop。

不同浏览器的CSS盒模型差异

不同浏览器在解析CSS盒模型及窗口尺寸时存在差异，主要体现在IE与Firefox等主流浏览器的实现逻辑上。

在IE6.0及Firefox 1.06+版本中，CSS盒模型的解析遵循标准行为。

在此环境下，clientWidth的计算结果等于元素宽度width加上内边距padding。

同样地，clientHeight的计算结果等于元素高度height加上内边距padding。

对于offsetWidth，其值等于元素宽度width加上内边距padding以及边框border的总和。

offsetHeight的值则等于元素高度height加上内边距padding以及边框border的总和。

在IE5.0及IE5.5版本中，CSS盒模型的解析遵循非标准行为（Quirks Mode）。

在此模式下，clientWidth的计算结果等于元素宽度width减去边框border的宽度。

clientHeight的计算结果等于元素高度height减去边框border的高度。

offsetWidth直接等于元素的宽度width，不包含padding和border。

offsetHeight直接等于元素的高度height，不包含padding和border。

需要特别说明的是，CSS中的margin外边距属性与clientWidth、offsetWidth、clientHeight及offsetHeight的计算均无直接关联。

－－－－－－－－－－－－－－－－－－－

技术要点与跨浏览器兼容方案

技术要点

本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在 IE下需要深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

关于获取各种浏览器可见窗口大小的一点点研究。

在我本地测试当中：在IE、FireFox、Opera下都可以使用

document.body.clientWidth

document.body.clientHeight即可获得，很简单，很方便。

而在公司项目当中：Opera仍然使用

document.body.clientWidth

document.body.clientHeight

可是IE和FireFox则使用

document.documentElement.clientWidth

document.documentElement.clientHeight

原来是W3C的标准在作怪啊http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果在页面中添加这行标记的话

在IE中：document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度

在FireFox中：document.body.clientWidth ==> BODY对象宽度

document.body.clientHeight ==> BODY对象高度

document.documentElement.clientWidth ==> 可见区域宽度

document.documentElement.clientHeight ==> 可见区域高度?

在Opera中： document.body.clientWidth ==> 可见区域宽度

document.body.clientHeight ==> 可见区域高度

document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

而如果没有定义W3C的标准，

则IE为：document.documentElement.clientWidth ==> 0

document.documentElement.clientHeight ==> 0

FireFox为:document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

Opera为：document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）

document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

真是一件麻烦事情，其实就前端设计开发来看，宁可少一些对象和方法，不使用最新的标准要方便许多啊。但是跟不上潮流就永远做不了一个高级设计师，所以这些知识我们还是必须要理解和熟练掌握的。