跨浏览器确定一个窗口的大小
跨浏览器确定一个窗口的大小不是一件简单的事。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
点击“阅读原文”