javascript获取浏览器窗口大小办法-优快云博客

本文介绍了浏览器中四个关键尺寸属性（outerWidth, outerHeight, innerWidth, innerHeight）的使用方式及不同浏览器间的兼容性差异，并提供了一段跨浏览器兼容性的代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

四个属性：

1：outerWidth 2：outerHeight 3：innerWidth 4：innerHeight

经最新版本的浏览器(Chrom IE Firefox Opera)测试，初步结果如下：

1：outerWidth与outerHeight

IE9+,Safari，Firefox ：窗口本身加边框(指的是整个Brower)；

Chrom，Opera：页面视图容器(不包含边框) 。

2：innerWidth，innerHeight

IE9+,Safari，Firefox ：可视区域；

Chrom，Opera：可视区域。

获取可视区域宽度和高度的跨浏览器兼容性方法：

var pageWidth = window.innerWidth,
                pageHeight = window.innerHeight;  
        if(typeof pageWidth != "number"){  //IE兼容性问题
            if(document.compatMode == "CSS1Compat"){
                  pageWidth = document.documentElement.clientWidth;  //适合移动版IE     其他移
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　//浏览器中获取的是页面渲染后的实际大小

                  pageHeight = document.documentElement.clientHeight;   //只有IE在标准模式下有用
            } else{
                pageWidth = document.body.clientWidth;   //混杂模式下的IE
                pageHeight = document.body.clientHeight;
            }
        }

转载于:https://www.cnblogs.com/Frank-C/p/4845179.html