四个属性:

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;
}
}

javascript获取浏览器窗口大小办法的更多相关文章

  1. Javascript获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

    /******************** * 取窗口滚动条高度  ******************/function getScrollTop(){    var scrollTop=0;    ...

  2. javascript获取浏览器窗口大小

    var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h= ...

  3. JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth

    常用: JS 获取浏览器窗口大小   // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...

  4. JavaScript获取浏览器类型与版本

    从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: <script type="text/javascript"> var S ...

  5. JS 获取浏览器窗口大小

    JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } els ...

  6. JavaScript获取浏览器版本等信息

    ** 不同浏览器版本可能存在差异,使用时请测试自己的环境 ** 测试时各个浏览器版本 IE: 11.953.14393.0 Edge: Microsoft Edge 38.14393.0.0;Micr ...

  7. JavaScript学习总结(十八)——JavaScript获取浏览器类型与版本

    从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: 1 <script type="text/javascript"> 2 v ...

  8. js获取浏览器窗口大小

    摘抄:https://blog.csdn.net/qq_27628085/article/details/81947478 常用: JS 获取浏览器窗口大小       // 获取窗口宽度   if ...

  9. JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

随机推荐

  1. 【Web探索之旅】第三部分第一课:服务器

    内容简介 1.第三部分第一课:服务器 2.第三部分第二课预告:IP地址和域名 第三部分第一课:服务器 大家好,欢迎来到[Web探索之旅]的第三部分.这一部分有不少原理,还是很重要的. 这一部分我们会着 ...

  2. 采用truelicense进行Java规划license控制 扩展可以验证后,license 开始结束日期,验证绑定一个给定的mac住址

    采用truelicense进行Java规划license控制 扩展可以验证后,license 开始结束日期,验证绑定一个给定的mac住址. Truelicense 它是一个开源java license ...

  3. php学习笔记--高级教程--读取文件、创建文件、写入文件

    打开文件:fopen:fopen(filename,mode);//fopen("test.txt","r"): 打开模式:r  仅仅读方式打开,将文件指针指向 ...

  4. 错误: 无法找到或可以不被加载到主类 Main

    于eclipse导入Javaproject,执行错误:错误: 无法找到或可以不被加载到主类 Main! 百思不得其解,该解决方案是非常在线,但不是正确的方式,最后,例如,由下列溶液: 打开debug ...

  5. Oracle 11G DataGuard生产环境又一次启动具体过程

     场景,重新启动数据库,不重新启动linux系统,所以不用考虑监听程序,#linux输入lsnrctl start1 数据库关闭1.1 关闭主库SHUTDOWN IMMEDIATE; SQL> ...

  6. 使用Bootstrap 他写道网站

    新发现vdceye有些难看的网站,为了找到一个bootstrap工具,我一次又一次地写信给网站 这个工具是很容易使用 http://vdceye.com/ 版权声明:本文博客原创文章,博客,未经同意, ...

  7. Atitit. 拉开拉链zip文件 最佳实践实施 java c# .net php

    Atitit. 拉开拉链zip文件 的实现最佳实践 java c# .net php 1. Jdk zip 跟apache ant zip 1 2. Apache Ant包进行ZIP文件压缩,upzi ...

  8. C#中调用c++的dll

    C#中调用c++的dll具体创建与调用步骤,亲测有效~   使用的工具是VS2010哦~其他工具暂时还没试过 我新建的工程名是my21dll,所以会生成2个同名文件.接下来需要改动的只有画横线的部分 ...

  9. 大数据的胖哥的方式(9)- 金融业数据仓库的逻辑模型FS-LDM

    介绍: 大数据是不是海市蜃楼,来自小橡子只是意淫奥克斯,大数据的发展,而且要从头开始,基于大数据建设国家.项目-level数据中心行业将越来越多,大数据仅供技术,而非溶液,临数据组织模式,数据逻辑模式 ...

  10. Docker简明教程(转)

    Docker自从诞生以来就一直备受追捧,学习Docker是一件很炫酷.很有意思的事情.我希望通过这篇文章能够让大家快速地入门Docker,并有一些学习成果来激发自己的学习兴趣.我也只是一个在Docke ...