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

在不同浏览器中确定浏览器窗口大小没有想象中那么容易。所有现代浏览器都支持 4 个属性：
innerWidth、innerHeight、outerWidth 和 outerHeight。outerWidth 和 outerHeight 返回浏览器窗口自身的大小（不管是在最外层 window 上使用，还是在窗格中使用）。innerWidth
和 innerHeight 返回浏览器窗口中页面视口的大小（不包含浏览器边框和工具栏）。
document.documentElement.clientWidth 和 document.documentElement.clientHeight
返回页面视口的宽度和高度。
浏览器窗口自身的精确尺寸不好确定，但可以确定页面视口的大小，如下所示：

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

这里，先将 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()接收宽度和高度各要缩放多少。下面看个例子：

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

与移动窗口的方法一样，缩放窗口的方法可能会被浏览器禁用，而且在某些浏览器中默认是禁用的。
同样，缩放窗口的方法只能应用到最上层的 window 对象。视口位置
浏览器窗口尺寸通常无法满足完整显示整个页面，为此用户可以通过滚动在有限的视口中查看文档。度量文档相对于视口滚动距离的属性有两对，返回相等的值：window.pageXoffset/window.
scrollX 和 window.pageYoffset/window.scrollY。
可以使用 scroll()、scrollTo()和 scrollBy()方法滚动页面。这 3 个方法都接收表示相对视口距离的 x 和 y 坐标，这两个参数在前两个方法中表示要滚动到的坐标，在最后一个方法中表示滚动的距离。

window.scrollBy(0, 100); 
// 相对于当前视口向右滚动 40 像素
window.scrollBy(40, 0); 
// 滚动到页面左上角
window.scrollTo(0, 0);
// 滚动到距离屏幕左边及顶边各 100 像素的位置
window.scrollTo(100, 100);

这几个方法也都接收一个 ScrollToOptions 字典，除了提供偏移值，还可以通过 behavior 属性告诉浏览器是否平滑滚动。

window.scrollTo({ 
 left: 100, 
 top: 100, 
 behavior: 'auto' 
}); 
// 平滑滚动
window.scrollTo({ 
 left: 100, 
 top: 100, 
 behavior: 'smooth' 
});