跨浏览器确定一个窗口的大小不是一件容易的事。
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)大小而非浏览器窗口大小。
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 属性,都可以取得视口的大小。
虽然最终无法确定浏览器窗口本身的大小,但可以取得页面视口的大小,代码如下:
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 保存着可见视口,也就是屏幕上可见页面区域的大小。
移动IE浏览器不支持这些属性,但通过 document.documentElement.clientWidth 和 document.documentElement.clientHeihgt 提供了相同的信息。随着页面的缩放,这些值也会相应变化。
扫码关注腾讯云开发者
领取腾讯云代金券
Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号:粤B2-20090059 深公网安备号 44030502008569
腾讯云计算(北京)有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287
Copyright © 2013 - 2025 Tencent Cloud.
All Rights Reserved. 腾讯云 版权所有