窗口大小

本节目标：理解“窗口大小”的核心思路，并能把它用于实际开发或面试表达。跨浏览器确定一个窗口的大小不是一件简单的事。IE9+、Firefox. Safari、Opera和Chrome均为此提供了4个属性：

innerWidth, innerHeight, outerwidth 和 outerHeight：。在 IE9+、Sa&ri 和 Firefbx 中，outerwidth和outerHeight返回浏览器窗口本身的尺寸(无论是从最外层的window对象还是从某个框架访何；在Opera中，这两个属性的值表示页面视图容器的大小。而innerwidth和innerHeight 则表示该容器中页面视图区的大小(减去边框宽度)。在Chrome中，outerwidth. outerHeight与innerwidthinnerHeight返回相同的值，即视口 (viewport)大小而非浏览器窗口大小。

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,
    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的值分别赋给了 pageWidth和pageHeight。然后检査pageWidth中保存的是不是一数值；如果不是，则通过检査document.compatMode (这个风性将在第10章全面讨论)来确定页面是否处于标准模式。如果是，则分别使用 document.documentElement.clientwidth 和 document-documentElement.Client-Height 的值a 否则，就使用 document.body.clientwidth 和 document.body.clientHeight 的值。

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

在其他移动浏览器中，document.documentElement度量的是布局视口，即渲染后页面的实际大小(与可见视口不同，可见视口只是整个页面中的一小部分）。移动IE浏览器把布局视口的信息保存在document.body.clientwidth 和 document.body.clientHeight中。这些值不会随着页面缩放变化由于与桌面浏览器间存在这些姜异，最好是先检测一下用户是否在使用移动设备，然后再决定使用那个属性。

有关移动设备视口的话题比较多如有很多非常规的情形，也有各种各样的建议。移动开发咨询师Peter-Paul Koch记述了他对这个问题的研究：http://tcn/zOZsOTz。如来你在做移动Web开发，推荐你读一读这篇文章。

另外，使用resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。这两个方法都接收两个參数，其中resizeTo()接收浏览器窗口的新宽度和新高度，而resizeBy()接收新窗口与原窗口的宽度和高度之姜。来看下面的例子。
// 调整到100*100
window.resizeTo(100, 100);
// 调整到200*150
window.resizeBy(100, 50);
// 调整到300*300
window.resizeTo(300, 300);
需要注意的是，这两个方法与移动窗口位置的方法类似，也有可能被浏览禁用；而且，在Opera和IE7 (及更高版本)中默认就是禁用的。另外，这两个方法同样不适用于框架，而只能对最外层的window对象使用。

窗口大小 ​

窗口大小