JS获取各种浏览器窗口大小的方法


Posted in Javascript onJanuary 14, 2014

常用:
JS 获取浏览器窗口大小

// 获取窗口宽度 
if (window.innerWidth) 
winWidth = window.innerWidth; 
else if ((document.body) && (document.body.clientWidth)) 
winWidth = document.body.clientWidth; 
// 获取窗口高度 
if (window.innerHeight) 
winHeight = window.innerHeight; 
else if ((document.body) && (document.body.clientHeight)) 
winHeight = document.body.clientHeight; 
// 通过深入 Document 内部对 body 进行检测,获取窗口大小 
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) 
{ 
winHeight = document.documentElement.clientHeight; 
winWidth = document.documentElement.clientWidth; 
}

详细:
关于获取各种浏览器可见窗口大小:
<script>
function getInfo()
{
var s = "";
s = " 网页可见区域宽:" document.body.clientWidth;
s = " 网页可见区域高:" document.body.clientHeight;
s = " 网页可见区域宽:" document.body.offsetWidth " (包括边线和滚动条的宽)";
s = " 网页可见区域高:" document.body.offsetHeight " (包括边线的宽)";
s = " 网页正文全文宽:" document.body.scrollWidth;
s = " 网页正文全文高:" document.body.scrollHeight;
s = " 网页被卷去的高(ff):" document.body.scrollTop;
s = " 网页被卷去的高(ie):" document.documentElement.scrollTop;
s = " 网页被卷去的左:" document.body.scrollLeft;
s = " 网页正文部分上:" window.screenTop;
s = " 网页正文部分左:" window.screenLeft;
s = " 屏幕分辨率的高:" window.screen.height;
s = " 屏幕分辨率的宽:" window.screen.width;
s = " 屏幕可用工作区高度:" window.screen.availHeight;
s = " 屏幕可用工作区宽度:" window.screen.availWidth;

s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色";
s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸";
//alert (s);
}
getInfo();
</script>
在我本地测试当中:
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得,很简单,很方便。
而在公司项目当中:

Opera仍然使用
document.body.clientWidth
document.body.clientHeight

可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight

原来是W3C的标准在作怪啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果在页面中添加这行标记的话 在IE中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

在FireFox中:
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
 

在Opera中:
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)
而如果没有定义W3C的标准,则

IE为:
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

FireFox为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

Opera为:
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

Javascript 相关文章推荐
JavaScrip单线程引擎工作原理分析
Sep 04 Javascript
Jquery post传递数组方法实现思路及代码
Apr 28 Javascript
JavaScript 模块化编程(笔记)
Apr 08 Javascript
JSON相关知识汇总
Jul 03 Javascript
jQuery Validation PlugIn的使用方法详解
Dec 18 Javascript
基于javascript实现按圆形排列DIV元素(三)
Dec 02 Javascript
Bootstrap基本样式学习笔记之标签(5)
Dec 07 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
详解Javascript中DOM的范围
Feb 13 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 Javascript
js鼠标滑轮滚动事件绑定的简单实例(兼容主流浏览器)
Jan 14 #Javascript
Eclipse下jQuery文件报错出现错误提示红叉
Jan 13 #Javascript
节点的插入之append()和appendTo()的用法介绍
Jan 13 #Javascript
移动节点的jquery代码
Jan 13 #Javascript
删除节点的jquery代码
Jan 13 #Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 #Javascript
js实现的map方法示例代码
Jan 13 #Javascript
You might like
让你的PHP同时支持GIF、png、JPEG
2006/10/09 PHP
php 无限级分类学习参考之对ecshop无限级分类的解析 带详细注释
2010/03/23 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
PHP QRCODE生成彩色二维码的方法
2016/05/19 PHP
javascript实现阻止iOS APP中的链接打开Safari浏览器
2014/06/12 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
js实现的万能flv网页播放器代码
2016/04/30 Javascript
浅谈JavaScript的函数及作用域
2016/12/30 Javascript
jQuery实现联动下拉列表查询框
2017/01/04 Javascript
react-router实现按需加载
2017/05/09 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
Vue封装的组件全局注册并引用
2019/07/24 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
javascript实现摄像头拍照预览
2019/09/30 Javascript
一起写一个即插即用的Vue Loading插件实现
2019/10/31 Javascript
JS造成内存泄漏的几种情况实例分析
2020/03/02 Javascript
[00:27]DOTA2次级职业联赛 - Lilith战队宣传片
2014/12/01 DOTA
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
使用Python爬取最好大学网大学排名
2018/02/24 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
windows下cx_Freeze生成Python可执行程序的详细步骤
2018/10/09 Python
总结python中pass的作用
2019/02/27 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
Pycharm 2020.1 版配置优化的详细教程
2020/08/07 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
个人自我评价分享
2013/12/20 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
高三毕业典礼主持词
2014/03/27 职场文书
无偿献血倡议书
2014/04/14 职场文书
2014年体育工作总结
2014/11/24 职场文书
装修公司管理制度
2015/08/05 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
Python的这些库,你知道多少?
2021/06/09 Python