四个属性:

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. 微信小程序开发者工具集合包

    开发论坛 http://www.henkuai.com/forum-56-1.html 工具包下载  https://yunpan.cn/ckXFpuzAeVi2s  访问密码 b4cc 开发文档 h ...

  2. makefile知识点归纳的

    以一个样例開始,文件文件夹结构例如以下 ---------(当前文件夹)-----------main.c                   |                   |------- ...

  3. Scrapy系列教程(2)------Item(结构化数据存储结构)

    Items 爬取的主要目标就是从非结构性的数据源提取结构性数据,比如网页. Scrapy提供 Item 类来满足这种需求. Item 对象是种简单的容器.保存了爬取到得数据. 其提供了 类似于词典(d ...

  4. 香蕉派路由功Openwrt、Android功耗对照測试

    路由这个东西是要长期通电使用的,所以功耗也是须要关注的.如今香蕉派路由已经有了openwrt和android两个 系统,这两个系统的功耗是否一样呢? 測试工具:QUIGG的德国产功耗測试仪一个.手机充 ...

  5. Android - 用Fragments实现动态UI

    要在Android上实现动态的多窗口的用户交互界面,需要把UI组建和activity放到modules中, 这样才能划进划出activity.可是使用Fragment类来创建modules,它就像一个 ...

  6. linuxIO刷新机制fsync和fdatasync详细解释

    前言: Linux,unix在内核中设有 缓冲区快速缓冲或页面快速缓冲.大多数磁盘I/O都通过缓冲进行,採用延迟写技术. sync:将全部改动过的快缓存区排入写队列.然后返回.并不等待实际写磁盘操作结 ...

  7. 因host命令导致无法正常SHUTDOWN的实验

    SHUTDOWN有几个參数能够使用: SHUTDOWN NORMAL:NORMAL也是默认的子句,运行的条件是 No new connections are allowed after the sta ...

  8. BZOJ 1901 Dynamic Rankings 树董事长

    标题效果:间隔可以改变k少 我的两个天树牌主席... 隔断Count On A Tree 之后我一直认为,随着树的主席的变化是分域林木覆盖率可持久段树. .. 事实上,我是误导... 尼可持久化线段树 ...

  9. JAVA学习笔记 -- 包资源文件jar包裹

    初学者GUI,使用Eclipse出口jar包裹,不能显示最小化的图标集(hello.png根文件下的项目文件夹文件).码如下面: import javax.swing.JFrame; import j ...

  10. Phoenix(sql on hbase)简单介绍

    Phoenix(sql on hbase)简单介绍 介绍: Phoenix is a SQL skin over HBase delivered as a client-embedded JDBC d ...