javascript获取浏览器窗口大小办法
四个属性:
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获取浏览器窗口大小办法的更多相关文章
- Javascript获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
/******************** * 取窗口滚动条高度 ******************/function getScrollTop(){ var scrollTop=0; ...
- javascript获取浏览器窗口大小
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var h= ...
- JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth
常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...
- JavaScript获取浏览器类型与版本
从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: <script type="text/javascript"> var S ...
- JS 获取浏览器窗口大小
JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } els ...
- JavaScript获取浏览器版本等信息
** 不同浏览器版本可能存在差异,使用时请测试自己的环境 ** 测试时各个浏览器版本 IE: 11.953.14393.0 Edge: Microsoft Edge 38.14393.0.0;Micr ...
- JavaScript学习总结(十八)——JavaScript获取浏览器类型与版本
从网上找到一段使用JavaScript判断浏览器以及浏览器版本的比较好的代码,在此记录一下: 1 <script type="text/javascript"> 2 v ...
- js获取浏览器窗口大小
摘抄:https://blog.csdn.net/qq_27628085/article/details/81947478 常用: JS 获取浏览器窗口大小 // 获取窗口宽度 if ...
- JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...
随机推荐
- 微信小程序开发者工具集合包
开发论坛 http://www.henkuai.com/forum-56-1.html 工具包下载 https://yunpan.cn/ckXFpuzAeVi2s 访问密码 b4cc 开发文档 h ...
- makefile知识点归纳的
以一个样例開始,文件文件夹结构例如以下 ---------(当前文件夹)-----------main.c | |------- ...
- Scrapy系列教程(2)------Item(结构化数据存储结构)
Items 爬取的主要目标就是从非结构性的数据源提取结构性数据,比如网页. Scrapy提供 Item 类来满足这种需求. Item 对象是种简单的容器.保存了爬取到得数据. 其提供了 类似于词典(d ...
- 香蕉派路由功Openwrt、Android功耗对照測试
路由这个东西是要长期通电使用的,所以功耗也是须要关注的.如今香蕉派路由已经有了openwrt和android两个 系统,这两个系统的功耗是否一样呢? 測试工具:QUIGG的德国产功耗測试仪一个.手机充 ...
- Android - 用Fragments实现动态UI
要在Android上实现动态的多窗口的用户交互界面,需要把UI组建和activity放到modules中, 这样才能划进划出activity.可是使用Fragment类来创建modules,它就像一个 ...
- linuxIO刷新机制fsync和fdatasync详细解释
前言: Linux,unix在内核中设有 缓冲区快速缓冲或页面快速缓冲.大多数磁盘I/O都通过缓冲进行,採用延迟写技术. sync:将全部改动过的快缓存区排入写队列.然后返回.并不等待实际写磁盘操作结 ...
- 因host命令导致无法正常SHUTDOWN的实验
SHUTDOWN有几个參数能够使用: SHUTDOWN NORMAL:NORMAL也是默认的子句,运行的条件是 No new connections are allowed after the sta ...
- BZOJ 1901 Dynamic Rankings 树董事长
标题效果:间隔可以改变k少 我的两个天树牌主席... 隔断Count On A Tree 之后我一直认为,随着树的主席的变化是分域林木覆盖率可持久段树. .. 事实上,我是误导... 尼可持久化线段树 ...
- JAVA学习笔记 -- 包资源文件jar包裹
初学者GUI,使用Eclipse出口jar包裹,不能显示最小化的图标集(hello.png根文件下的项目文件夹文件).码如下面: import javax.swing.JFrame; import j ...
- Phoenix(sql on hbase)简单介绍
Phoenix(sql on hbase)简单介绍 介绍: Phoenix is a SQL skin over HBase delivered as a client-embedded JDBC d ...