javascript——窗口大小和视口大小

窗口大小和视口大小的问题

IE9+、FireFox、Safari、Opera和Chrome提供了4个属性 innerWidth、outerWidth、innerHeight、outHeight

但是IE9+、Safari、FireFox中outerWidth和outerHeight返回浏览器窗口本身的尺寸（无论是从最外层window对象，还是某个框架访问）。在Opera中在两个值表示页面视图容器的大小。而innerWidth、innerHeight表示容器中页面视图区域的大小（减去边框高度）。

在Chrome中，outerWidth（Height）和innerWidth（Height）返回相同的值，都返回视口的大小。

IE8及更早的版本中没有提供取得当前窗口尺寸的属性；不过可以通过DOM获得页面可见区域的相关信息。

在IE、FireFox、Safari、Opera和Chrome中 

document.documentElement.clientWidth和document.documentElement.clientHeight提供了页面视口的信息。

在IE6中这些属性必须在标准模式下才有效，如果是混杂模式据必须通过document.body.clientWidth和document.body.clientHeight取得相同的信息。

处于混杂模式下的Chrome这两种方式都能取得视口的大小。

对于移动设备******************************

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

在其他移动浏览器中，document.documentElement度量的是布局视口，即渲染后页面的实际大小（可见视口是整个页面中的一部分），移动IE浏览器把布局视口的信息保存在document.body.clientWidth和document.body.clientHeight中，这些值不会随着页面缩放而变化。