四个属性:

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. BZOJ 2038: [2009国家集训队]小Z的袜子(hose) 分块

    分块大法好 2038: [2009国家集训队]小Z的袜子(hose) Time Limit: 20 Sec  Memory Limit: 259 MB Submit: 2938  Solved: 13 ...

  2. Android - 分享内容 - 添加一个简单的分享操作

    在ActionBar上使用ActionProvider实现一个高效的友好的分享操作在Android 4.0(API等级14)上更容易了.一个ActionProvider,一旦附加到action bar ...

  3. VC POST表单——登录验证新浪邮箱

    1.本机环境: Windows XP SP3.ADSL 2.开发工具: WildPackets OmniPeek V5.1.4 Visual C++ 6.0 IE6.0 FlexEdit V2.3.1 ...

  4. 【OC加强】辛格尔顿和[NSFileManager defaultMagager]以及其他设计模式

    我们在工作中使用文件NSFileManager上课时间,创建发现1对象,此2同样的对象地址: NSFileManager *file1=[NSFileManager defaultManager]; ...

  5. css+js整站变灰(兼容IE7+)

    原文:css+js整站变灰(兼容IE7+) 历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的? 重写一套css?NO,即便你有这个时间重写,那 ...

  6. 【转】Android 4.3源码下载及问题解决

    [html] view plaincopy 1 2 3 4 5 6 7 8 9 10 11 jianguoliao@jianguoliao-Lenovo-IdeaPad-Y470:~$ cat /et ...

  7. 10624 - Super Number

    题目链接 题意:给出n到m的范围,求出一个数在前i位数组成的数字能被i整除.假设存在输出这个数,假设不存在.输出-1. 思路:回溯,每次放第i位,然后推断是否符合题意.这题踩着时间过去的2.6s(看了 ...

  8. Android视频通话Java代码

      近期学习Android平台下跨平台音视频通信开发,尽管网上有非常多开源项目供我们參考学习.但音视频效果非常一般,还有非常多不稳定的因素,毕竟是开源嘛.在国内我找到了一个比較好音视频通信解决方式(百 ...

  9. js 性能优化整理之 缓存变量

    简单的常见的操作:假设每个便签添加一个  属性   -webkit-animation-delay:0.1s 递增操作::通过for循环添加 <ul id="uls"> ...

  10. 操作系统学习笔记_12_I/O管理 --I/O管理概述

    h1 { margin-bottom: 0.21cm; }h1.western { font-family: "Liberation Sans",sans-serif; font- ...