跨浏览器确定一个窗口的大小不是一件简单的事。
IE9+、Firefox、Safari、Opera 和 Chrome 均为此提供了4个属性： innerWidth 、innerHeight 、 outerWidth 和 outerHeight 。
在 IE9+、Safari 和 Firefox 中， outerWidth 和 outerHeight 返回浏览器窗口本身的尺寸（无论是从最外层的 window 对象还是从某个框架访问）。
在 Opera 中，这两个属性的值表示页面视图容器 的大小。而 innerWidth 和 innerHeight 则表示该容器中页面视图区的大小（减去边框宽度）。
在 Chrome 中， outerWidth 、 outerHeight 与 innerWidth 、 innerHeight 返回相同的值，即视口（viewport）大小而非浏览器窗口大小。
这里所谓的“页面视图容器”指的是 Opera 中单个标签页对应的浏览器窗口。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 属性，都可以取得视口的大小。
虽然最终无法确定浏览器窗口本身的大小，但却可以取得页面视口的大小，如下所示。
JS
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;
}
}
//document.compatMode 判断当前文档的渲染模式是混杂模式还是"标准规范模式"
语法
mode = document.compatMode
-
mode
的值为
"BackCompat"代表"混杂模式",或者为
"CSS1Compat"代表"标准规范模式".
例子
if (document.compatMode == "BackCompat") {
// 渲染模式为混杂模式
}
在以上代码中，我们首先将 window.innerWidth 和 window.innerHeight 的值分别赋给了 pageWidth 和 pageHeight 。然后检查 pageWidth 中保存的是不是一个数值；如果不是，则通过检查 document.compatMode （这个属性在《 HTML5扩展了HTMLDocument，增加了新的功能 》里面已经说明）来确定页面是否处于标准模式。如果是，则分别使用 document.documentElement.clientWidth 和 document.documentElement.clientHeight 的值。否则，就使用 document.body.clientWidth 和 document.body.clientHeight 的值。
对于移动设备，window.innerWidth 和 window.innerHeight 保存着可见视口，
也就是屏幕上可见页面区域的大小。移动IE浏览器不支持这些属性，但通过
document.documentElement.clientWidth 和 document.documentElement.clientHeihgt
提供了相同的信息。随着页面的缩放，这些值也会相应变化。
在其他移动浏览器中， document.documentElement 度量的是布局视口，即渲染后页面的实际大小（与可见视口不同，可见视口只是整个页面中的一小部分）。移动IE浏览器把布局视口的信息保存在 document.body.clientWidth 和
document.body.clientHeight 中。这些值不会随着页面缩放变化。
