四个属性:

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. Directx11学习笔记【十四】 使用最新的Effect框架和SDK

    由于之前一直在看directx11龙书学习,因此sdk一直用的Microsoft DirectX SDK (June 2010) 版本,最近在stackoverflow上问dx11相关问题时,一直被大 ...

  2. UI标签库的话题:JEECG智能开发平台 BaseTag(样式表和JS标签的引入)

    UI标签库专题一:JEECG智能开发平台 BaseTag(样式表和JS引入标签) 1.BaseTag(样式表和JS引入标签) 1.1. 演示样例 <t:base type="jquer ...

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

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

  4. Zen Coding 快速编写HTML/CSS代码的实现

    在本文中我们将展示一种新的使用仿CSS选择器的语法来快速开发HTML和CSS的方法.它由Sergey Chikuyonok开发. 你在写HTML代码(包括所有标签.属性.引用.大括号等)上花费多少时间 ...

  5. Linux互斥和同步应用程序(四):posix互斥信号和同步

           [版权声明:尊重原创.转载请保留源:blog.csdn.net/shallnet 要么 .../gentleliu,文章仅供学习交流,请勿用于商业用途]          在前面讲共享内 ...

  6. [cocos2dx注意事项014]一个用于cocos2dx对象智能指针模板

    现在,C++有许多实现智能指针,一个更无所谓.哈. 这种智能指针是专为cocos2dx 2.2.x自定义.主要的易用性,同时必须遵循现有的cocos2dx内存管理.特殊实现这样的智能指针.无需在使用时 ...

  7. Chapter 2 User Authentication, Authorization, and Security(4):限制SA帐户管理权限

    原版的:http://blog.csdn.net/dba_huangzj/article/details/38817915,专题文件夹:http://blog.csdn.net/dba_huangzj ...

  8. MemCache分布式内存对象缓存系统

    MemCache超详细解读 MemCache是一个自由.源码开放.高性能.分布式的分布式内存对象缓存系统,用于动态Web应用以减轻数据库的负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而 ...

  9. 懵懵懂懂初识J2EE

    一.定义 Java2平台包含:标准版.企业版.微缩版.当中J2SE是Java2的标准版,主要用 于桌面应用软件的编程:J2ME是微缩版,主要应用于嵌入式系统开发:还有这次学习的J2EE是Java2的企 ...

  10. C#中的动态特性

    众所周知,C#和Java一样,都是一门静态语言.在C# 4.0之前,想要和动态语言(诸如Python.Javascript等)进行方便地互操作是一件不太容易的事情.而C# 4.0为我们带来的dynam ...