前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >跨浏览器获取不同环境的window窗口宽度和高度

跨浏览器获取不同环境的window窗口宽度和高度

作者头像
德顺
发布于 2019-11-13 02:08:42
发布于 2019-11-13 02:08:42
2.9K00
代码可运行
举报
文章被收录于专栏:前端资源前端资源
运行总次数:0
代码可运行
窗口大小

跨浏览器确定一个窗口的大小不是一件容易的事。

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 属性,都可以取得视口的大小。 

虽然最终无法确定浏览器窗口本身的大小,但可以取得页面视口的大小,代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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 提供了相同的信息。随着页面的缩放,这些值也会相应变化。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验