跨浏览器确定一个窗口的大小

跨浏览器确定一个窗口的大小不是一件简单的事。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;

    }

}

在以上代码中，我们首先将  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  中。这些值不会随着页面缩放变化。

提

示

由于与桌面浏览器间存在这些差异，最好是先检测一下用户是否在使用移动设备，然后再决定使用哪个属性。

好了，今天的文章就到这里，本文由Web前端精髓为您提供，喜欢的同学记得点击收藏或者点赞哦！

推荐阅读

面试分享：一年经验初探阿里巴巴前端社招

https://github.com/jawil/blog/issues/22

点击“阅读原文”