四时宝库

跨浏览器确定一个窗口的大小不是一件简单的事。

innerWidth、innerHeight、outerWidth和outerHeight属性

IE9+、Firefox、Safari、Opera和Chrome均为此提供了4个属性：innerWidth、innerHeight、outerWidth和outerHeight。

在IE9+、Firefox、Safari中，outerWidth和outerHeight返回浏览器窗口本身的尺寸。

在Opera中，这两个属性的值表示页面视图容器的大小。这里的页面视图容器，指的是Opera中单个标签页对应的浏览器窗口。

在IE9+、Firefox、Safari、Opera中，innerWidth、innerHeight则表示页面视图区的大小。

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

DOM提供的页面可见区域

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

在IE、Firefox、Safari、Opera和Chrome中，document.documentElement.clientWidth和document.documentElement.clientHeight中保存了页面视口的信息。

在IE6中，这些属性必须在标准模式下才有效。如果是混杂模式，就必须通过document.body.clientWidth和document.body.clientHeight中取得相同信息。

而对于混杂模式下的Chrome，则无论通过document.documentElement还是document.body中的clientWidth和clientHeight属性，都可以取得视口的大小。

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

var pageWidth = window.innerWidth;
var 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;
	}
}

移动设备

可见视口

对于移动设备，window.innerWidth和window.innerHeight保存着可见视口，也就是屏幕上可见页面区域的大小。移动IE浏览器不支持这些属性，但通过document.documentElement.clientWidth和document.documentElement.clientHeight提供了相同的信息。随着页面的缩放，这些值也会相应变化。

布局视口

在其他移动浏览器中，document.documentElement度量的是布局视口，即渲染后页面的实际大小（与可见视口不同，可见视口只是整个页面中的一小部分）。移动IE浏览器把布局视口的信息保存在document.body.clientWidth和document.body.clientHeight中。这些值不会随着页面缩放变化。

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

调整浏览器窗口的大小

使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。这两个方法都接收两个参数，其中resizeTo()接收浏览器窗口的新宽度和新高度，而resizeBy()接收新窗口与原窗口的宽度和高度之差。如下：

window.resizeTo(100, 100);
window.resizeBy(100, 50);

需要注意的是，这两个方法与移动窗口位置的方法类似，也有可能被浏览器禁用。