JavaScript高级程序设计之BOM之window 对象之窗口大小 第8.1.4讲笔记

跨浏览器确定一个窗口的大小不是一件简单的事。IE9+、Firefox、Safari、Opera 和Chrome 均为此提

供了4 个属性：innerWidth、innerHeight、outerWidth 和outerHeight。在IE9+、Safari 和Firefox

中，outerWidth 和outerHeight 返回浏览器窗口本身的尺寸（无论是从最外层的window 对象还是从

某个框架访问）。在Opera 中，这两个属性的值表示页面视图容器

①

的大小。而innerWidth 和innerHeight

则表示该容器中页面视图区的大小（减去边框宽度）。在Chrome 中，outerWidth、outerHeight 与

innerWidth、innerHeight 返回相同的值，即视口（viewport）大小而非浏览器窗口大小。

IE8 及更早版本没有提供取得当前浏览器窗口尺寸的属性；不过，它通过DOM 提供了页面可见区域

的相关信息。

在IE、Firefox、Safari、Opera 和Chrome 中，document.documentElement.clientWidth 和

document.documentElement.clientHeight 中保存了页面视口的信息。在IE6 中，这些属性必须在

标准模式下才有效；如果是混杂模式，就必须通过document.body.clientWidth 和document.body.

clientHeight 取得相同信息。而对于混杂模式下的Chrome，则无论通过document.documentEle-

ment 还是document.body 中的clientWidth 和clientHeight 属性，都可以取得视口的大小。

虽然最终无法确定浏览器窗口本身的大小，但却可以取得页面视口的大小，如下所示。

var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if (typeof pageWidth != "number"){
if (document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
WindowSizeExample01.htm
——————————
①这里所谓的“页面视图容器”指的是Opera 中单个标签页对应的浏览器窗口。

在以上代码中，我们首先将window.innerWidth 和window.innerHeight 的值分别赋给了

pageWidth 和pageHeight。然后检查pageWidth 中保存的是不是一个数值；如果不是，则通过检查

document.compatMode（这个属性将在第10 章全面讨论）来确定页面是否处于标准模式。如果是，则

分别使用document.documentElement.clientWidth 和document.documentElement.client-

Height 的值。否则，就使用document.body.clientWidth 和document.body.clientHeight 的值。

对于移动设备，window.innerWidth 和window.innerHeight 保存着可见视口，也就是屏幕上可

见页面区域的大小。移动IE 浏览器不支持这些属性，但通过document.documentElement.client-

Width 和document.documentElement.clientHeihgt 提供了相同的信息。随着页面的缩放，这些值

也会相应变化。

在其他移动浏览器中，document.documentElement 度量的是布局视口，即渲染后页面的实际大

小（与可见视口不同，可见视口只是整个页面中的一小部分）。移动IE 浏览器把布局视口的信息保存在

document.body.clientWidth和document.body.clientHeight中。这些值不会随着页面缩放变化。

由于与桌面浏览器间存在这些差异，最好是先检测一下用户是否在使用移动设备，然后再决定使用

哪个属性。

有关移动设备视口的话题比较复杂，有很多非常规的情形，也有各种各样的建议。

移动开发咨询师Peter-Paul Koch 记述了他对这个问题的研究：http://t.cn/zOZs0Tz。如

果你在做移动Web 开发，推荐你读一读这篇文章。

另外，使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。这两个方法都接收两个

参数，其中resizeTo()接收浏览器窗口的新宽度和新高度，而resizeBy()接收新窗口与原窗口的宽

度和高度之差。来看下面的例子。

//调整到100×100
window.resizeTo(100, 100);
//调整到200×150
window.resizeBy(100, 50);
//调整到300×300
window.resizeTo(300, 300);