BOM——window对象之窗口大小

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u014490083/article/details/78679658

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