javascript基础学习系列一百八十三：窗口大小

在不同浏览器中确定浏览器窗口大小没有想象中那么容易。所有现代浏览器都支持 4 个属性: innerWidth、innerHeight、outerWidth 和 outerHeight。outerWidth 和 outerHeight 返回浏 览器窗口自身的大小(不管是在最外层 window 上使用，还是在窗格中使用)。innerWidth 和 innerHeight 返回浏览器窗口中页面视口的大小(不包含浏览器边框和工具栏)。

document.documentElement.clientWidth 和 document.documentElement.clientHeight 返回页面视口的宽度和高度。

浏览器窗口自身的精确尺寸不好确定，但可以确定页面视口的大小，如下所示:

let pageWidth = window.innerWidth,
    pageHeight = window.innerHeight;
 if (typeof pageWidth != "number") { 11 if (document.compatMode == "CSS1Compat"){
    pageWidth = document.documentElement.clientWidth;
    pageHeight = document.documentElement.clientHeight;
  } else {
    pageWidth = document.body.clientWidth;
    pageHeight = document.body.clientHeight;
  }
}

这里，先将 pageWidth 和 pageHeight 的值分别设置为 window.innerWidth 和 window. innerHeight。然后，检查 pageWidth 是不是一个数值，如果不是则通过 document.compatMode 来检查页面是否处于标准模式。如果是，则使用 document.documentElement.clientWidth 和 document.documentElement.clientHeight;否则，就使用 document.body.clientWidth 和 document.body.clientHeight。

在移动设备上，window.innerWidth 和 window.innerHeight 返回视口的大小，也就是屏幕上 页面可视区域的大小。Mobile Internet Explorer 支持这些属性，但在 document.documentElement. clientWidth 和 document.documentElement.clientHeight 中提供了相同的信息。在放大或缩小 页面时，这些值也会相应变化。

在其他移动浏览器中，document.documentElement.clientWidth 和 document.documentElement. clientHeight 返回的布局视口的大小，即渲染页面的实际大小。布局视口是相对于可见视口的概念， 可见视口只能显示整个页面的一小部分。Mobile Internet Explorer 把布局视口的信息保存在 document.body.clientWidth 和 document.body.clientHeight 中。在放大或缩小页面时，这些 值也会相应变化。
因为桌面浏览器的差异，所以需要先确定用户是不是在使用移动设备，然后再决定使用哪个属性。
可以使用 resizeTo()和 resizeBy()方法调整窗口大小。这两个方法都接收两个参数，resizeTo() 接收新的宽度和高度值，而 resizeBy()接收宽度和高度各要缩放多少。下面看个例子:

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

与移动窗口的方法一样，缩放窗口的方法可能会被浏览器禁用，而且在某些浏览器中默认是禁用的。 同样，缩放窗口的方法只能应用到最上层的 window 对象。