四个属性:

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. DocFX

    微软开源全新的文档生成工具DocFX 微软放弃Sandcastle有些年头了,微软最近开源了全新的文档生成工具DocFX,目前支持C#和VB,类似JSDoc或Sphinx,可以从源代码中提取注释生成文 ...

  2. 学习通过Thread+Handler实现非UI线程更新UI组件(转)

    [Android线程机制] 出于性能考虑,Android的UI操作并不是线程安全的,这就意味着如果有多个线程并发操作UI组件,可能导致线程安全问题.为了解决这个问题,Android制定了一条简单的规则 ...

  3. 【Web探索之旅】第二部分第五课:响应式网站和移动应用

    内容简介 1.第二部分第五课:响应式网站和移动应用 2.第三部分第一课预告:服务器 第二部分第五课:响应式网站和移动应用 在我们开始聊响应式网站之前,我们可以聊聊移动App(App是Applicati ...

  4. java提高篇(七)-----详解内部类

    可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类是一个非常有用的特性但又比较难理解使用的特性(鄙人到现在都没有怎么使用过内部类,对内部类也只是略知一二). 第一次见面 内部类我们从外面 ...

  5. Singleton模式线程相关的(C\C++)

    这种需求的最新发展. 我需要一个静态类,无论地方,我可以在线程中调用它public功能对应的功能已经完成. 这个静态类会调用我初始化给它的一个指针,这个指针是与线程一一相应的: 准确来说这样的模式应该 ...

  6. 【Android进阶】URL与URI的区别

    首先,URI,是uniform resource identifier,统一资源标识符,用来唯一的标识一个资源. 而URL是uniform resource locator,统一资源定位器,它是一种具 ...

  7. 百度云盘建svnserver步骤

    安装tortoisesvn(略) 安装visualsvn(主server您可以使用)(略步骤)例如下面的安装文件夹后,: 注冊百度账号.进入百度云盘页面,建立目录,如mysvn. 下载百度云盘clie ...

  8. D其他项目打电话AL工程EF Model

     Based on your description and the error code, you will just need to ensure that your DataContext ...

  9. 微通道产品经理Grover采访:美国的微通道设计

    "'哥'在中国是一种尊称吗?哈哈.我们平时都叫张小龙'龙哥'." "是的.Dan哥,当你认为某个人牛逼的时候,你就能够叫他'哥'." 我对于Dan Grover ...

  10. 基于最简单的FFmpeg的AVDevice抽样(屏幕录制)

    =====================================================基于最简单的FFmpeg的AVDevice样品文章: 最简单的基于FFmpeg的AVDevic ...