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 ...
随机推荐
- BZOJ 2038: [2009国家集训队]小Z的袜子(hose) 分块
分块大法好 2038: [2009国家集训队]小Z的袜子(hose) Time Limit: 20 Sec Memory Limit: 259 MB Submit: 2938 Solved: 13 ...
- Android - 分享内容 - 添加一个简单的分享操作
在ActionBar上使用ActionProvider实现一个高效的友好的分享操作在Android 4.0(API等级14)上更容易了.一个ActionProvider,一旦附加到action bar ...
- VC POST表单——登录验证新浪邮箱
1.本机环境: Windows XP SP3.ADSL 2.开发工具: WildPackets OmniPeek V5.1.4 Visual C++ 6.0 IE6.0 FlexEdit V2.3.1 ...
- 【OC加强】辛格尔顿和[NSFileManager defaultMagager]以及其他设计模式
我们在工作中使用文件NSFileManager上课时间,创建发现1对象,此2同样的对象地址: NSFileManager *file1=[NSFileManager defaultManager]; ...
- css+js整站变灰(兼容IE7+)
原文:css+js整站变灰(兼容IE7+) 历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的? 重写一套css?NO,即便你有这个时间重写,那 ...
- 【转】Android 4.3源码下载及问题解决
[html] view plaincopy 1 2 3 4 5 6 7 8 9 10 11 jianguoliao@jianguoliao-Lenovo-IdeaPad-Y470:~$ cat /et ...
- 10624 - Super Number
题目链接 题意:给出n到m的范围,求出一个数在前i位数组成的数字能被i整除.假设存在输出这个数,假设不存在.输出-1. 思路:回溯,每次放第i位,然后推断是否符合题意.这题踩着时间过去的2.6s(看了 ...
- Android视频通话Java代码
近期学习Android平台下跨平台音视频通信开发,尽管网上有非常多开源项目供我们參考学习.但音视频效果非常一般,还有非常多不稳定的因素,毕竟是开源嘛.在国内我找到了一个比較好音视频通信解决方式(百 ...
- js 性能优化整理之 缓存变量
简单的常见的操作:假设每个便签添加一个 属性 -webkit-animation-delay:0.1s 递增操作::通过for循环添加 <ul id="uls"> ...
- 操作系统学习笔记_12_I/O管理 --I/O管理概述
h1 { margin-bottom: 0.21cm; }h1.western { font-family: "Liberation Sans",sans-serif; font- ...