四个属性:

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. Flex发行2048游戏

    近来的2048像挺火的游戏.在公交车,吃.甚至还有人走在路上拿着手机在玩.之前我看我的同事们戏,我认为这是很天真,中移动太无聊了吧 到后面,他是在,我觉得真的很无聊,这时候,无聊的时候无聊,后来我想用 ...

  2. Cocos2d-x-Lua 开发一个简单的游戏(记数字步进白色块状)

    Cocos2d-x-Lua 开发一个简单的游戏(记数字步进白色块状) 本篇博客来给大家介绍怎样使用Lua这门语言来开发一个简单的小游戏-记数字踩白块. 游戏的流程是这种:在界面上生成5个数1~5字并显 ...

  3. POJ 1745 Divisibility (线性dp)

    Divisibility Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 10598   Accepted: 3787 Des ...

  4. MVC下判断用户登录和授权状态方法

    MVC下判断用户登录和授权状态方法 在我们日常开发的绝大多数系统中,都涉及到管理用户的登录和授权问题.登录功能(Authentication),针对于所有用户都开放:而授权(Authorization ...

  5. LayoutDemo

    package swing.ui; import java.awt.BorderLayout; import java.awt.GridLayout; import javax.swing.JButt ...

  6. 如何识别SQL Server中的IO瓶颈

    原文:如何识别SQL Server中的IO瓶颈 原文出自: http://www.mssqltips.com/sqlservertip/2329/how-to-identify-io-bottlene ...

  7. mongodb.conf

    # mongodb.conf # Where to store the data. dbpath=/var/lib/mongodb #where to log logpath=/var/log/mon ...

  8. JAVA网络编程-----TCP沟通

    java采纳TCP变速箱使用Socket和ServerSocket数据传输. 采纳tcp步模式数据传输: 1.设定client和服务器 ,分别对应Socket和ServerSocket 2.建立连接后 ...

  9. AndroidUI组件之TabHost

    package com.gc.tabhost; /** * @author Android将军 * * * * 1.TabHost是一种非常有用的组件,TabHost能够非常方便地在窗体上放置 * 多 ...

  10. 走进spring之springmvc

    走进spring之springmvc 在动手之前,我们需要了解下springnvc.这里先献上一张springmvc的流程图及讲解. Spring的MVC框架是一个基于DispatcherServle ...