JavaScript 获取屏幕与窗口宽高及兼容性处理详解

JavaScript 获取屏幕与窗口宽高及兼容性处理详解

获取屏幕的有效宽高信息。

可以通过 window.screen.availHeight 和 window.screen.availWidth 属性来获取屏幕的可用高度和宽度。

网页可见区域宽度为 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 提供。关于HTML精确定位，涉及 scrollLeft、scrollWidth、clientWidth、offsetWidth 等属性。其中，scrollHeight 用于获取对象的滚动高度；scrollLeft 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离；scrollTop 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离；scrollWidth 获取对象的滚动宽度。offsetHeight 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度；offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置；offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。事件坐标方面，event.clientX 和 event.clientY 表示相对文档的水平与垂直坐标；event.offsetX 和 event.offsetY 表示相对容器的水平与垂直坐标。垂直方向滚动的值可通过 document.documentElement.scrollTop 获取。相对文档的水平坐标加上垂直方向滚动的量，即为 event.clientX + document.documentElement.scrollTop。

不同浏览器对尺寸属性的计算差异

IE与FireFox浏览器在此方面的实现存在以下差异：

在IE6.0及FF1.06+版本中：

clientWidth 等于 width 加上 padding。

clientHeight 等于 height 加上 padding。

offsetWidth 等于 width 加上 padding 再加上 border。

offsetHeight 等于 height 加上 padding 再加上 border。

而在IE5.0/5.5版本中：

clientWidth 等于 width 减去 border。

clientHeight 等于 height 减去 border。

offsetWidth 仅等于 width。

offsetHeight 仅等于 height。需要注意的是，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文档所在窗口的当前宽度。

示例代码执行流程解析

源程序解读

（1）程序首先建立一个表单，包含两个文本框，用于显示窗口当前的宽度和高度，并且，其数值会随窗口大小的改变而变化。

（2）在随后的JavaScript代码中，首先定义了两个变量winWidth和winHeight，用于保存窗口的高度值和宽度值。

（3）然后，在函数findDimensions ( )中，使用window.innerHeight和window.innerWidth得到窗口的高度和宽度，并将二者保存在前述两个变量中。

（4）再通过深入Document内部对body进行检测，获取窗口大小，并存储在前述两个变量中。

（5）在函数的最后，通过按名称访问表单元素，结果输出至两个文本框。

（6）在JavaScript代码的最后，通过调用findDimensions ( )函数，完成整个操作。