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 相关文章推荐
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
使用jquery局部刷新(jquery.load)从数据库取出数据
Jan 22 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
代码实例ajax实现点击加载更多数据图片
Oct 12 Javascript
解决iview多表头动态更改列元素发生的错误的方法
Nov 02 Javascript
详解Vue中watch的详细用法
Nov 28 Javascript
详解如何解决使用JSON.stringify时遇到的循环引用问题
Mar 23 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 register_globals 值为on与off的理解
2013/09/26 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
PHP实现QQ空间自动回复说说的方法
2015/12/02 PHP
PHP命名空间namespace用法实例分析
2016/09/27 PHP
php批量删除操作代码分享
2017/02/26 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
js类中获取外部函数名的方法与代码
2007/09/12 Javascript
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
Javascript中获取出错代码所在文件及行数的代码
2010/09/23 Javascript
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
jQuery阻止事件冒泡具体实现
2013/10/11 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
web前端开发JQuery常用实例代码片段(50个)
2015/08/28 Javascript
如何清除IE10+ input X 文本框的叉叉和密码输入框的眼睛图标
2016/12/21 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
JavaScript实现短暂提示框功能
2018/04/04 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
利用python发送和接收邮件
2016/09/27 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
NumPy 数组使用大全
2019/04/25 Python
python判断文件夹内是否存在指定后缀文件的实例
2019/06/10 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
python中的时区问题
2021/01/14 Python
一个入门级python爬虫教程详解
2021/01/27 Python
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
巴黎一票通:The Paris Pass
2018/02/10 全球购物
香蕉共和国加拿大官网:Banana Republic加拿大
2018/08/06 全球购物
Jar包的作用是什么
2014/03/30 面试题
文秘专业大学生求职信
2013/11/10 职场文书
医院护士的求职信
2014/01/03 职场文书
学校领导班子四风问题整改意见
2014/10/02 职场文书
联欢会开场白
2015/06/01 职场文书
教师读书笔记
2015/06/29 职场文书
Python获取字典中某个key的value
2022/04/13 Python