BOM——window对象之窗口大小

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

1.在IE9+、Firefox、Safari中，outerHeight/outerWidth返回浏览器窗口本身的大小（无论是从最外层的 window 对象还是从某个框架访问。）

2.在 Opera 中，outerHeight/outerWidth表示页面视图容器（ Opera 中单个标签页对应的浏览器窗口）的大小;而innerHeight/innerWidth表示该容器中页面试图去的大小（减去边框宽度）。

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

在 IE9+、Firefox、Safari、Opera、和 Chrome中，

document.documentElement.clientWidth

和

document.documentElement.clientHeight

中保存了页面视口的信息。但是在 IE6 中，这些属性必须在标准模式下才有效；若是在混杂模式下，就必须通过

document.body.clientWidth

和

document.body.clientHeight

取得相同信息。对于混杂模式下的 Chrome，则无论通过

document.documentElement

还是

document.body

中的 clientHeight 和 clientWidth 属性，都可以取得视口的大小。

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

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;
}
}

代码解释：

1.通过检查

document.compatMode == "CSS1Compat"

来确定页面是否处于标准模式。

对于移动设备，

window.innerWidth

和

window.innerHeight

保存着可见视口，也就是屏幕上可见页面区域的大小。移动 IE 浏览器不支持这些属性，但通过

document.documentElement.clientWidth

和

document.documentElement.clientHeight

提供了相同的信息。随着页面的缩放，这些值也会相应变化。在其他移动浏览器中，

document.documentElement

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

document.body.clientWidth

和

document.body.clientHeight

中。这些值不会随着页面缩放变化。

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

调整浏览器窗口大小的方法：

1.

resizeTo()

：接收浏览器窗口的新宽度和新高度；

//调整到100*100
window.resizeTo(100,100);

2.

resizeBy()

：接收新窗口与原窗口的宽度和高度之差。

//调整到200*150
window.resizeBy(100,50);