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 相关文章推荐
全面解析Bootstrap表单使用方法(表单控件)
Nov 24 Javascript
JavaScript事件代理和委托详解
Apr 08 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
Sep 06 Javascript
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 Javascript
JavaScript数据结构与算法之二叉树遍历算法详解【先序、中序、后序】
Feb 21 Javascript
微信小程序的线程架构【推荐】
May 14 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
vue.js实现照片放大功能
Jun 23 Javascript
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
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导出oracle库的php代码
2009/04/20 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
Symfony2实现在controller中获取url的方法
2016/03/18 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
JavaScript关于select的相关操作说明
2010/01/13 Javascript
js 替换功能函数,用正则表达式解决,js的全部替换
2010/12/08 Javascript
javascript的函数、创建对象、封装、属性和方法、继承
2011/03/10 Javascript
jquery动画2.元素坐标动画效果(创建一个图片走廊)
2012/08/24 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
json格式的时间显示为正常年月日的方法
2013/09/08 Javascript
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
js中array的sort()方法使用介绍
2014/02/20 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
7个去伪存真的JavaScript面试题
2016/01/07 Javascript
仅一个form表单 js实现注册信息依次填写提交功能
2016/06/12 Javascript
全面了解构造函数继承关键apply call
2016/07/26 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
2016/10/25 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
2020/03/04 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
kafka-python 获取topic lag值方式
2019/12/23 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
利用css3如何设置没有上下边的列表间隔线
2017/07/03 HTML / CSS
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
2017/01/09 HTML / CSS
英国家电直销:Appliances Direct
2016/09/22 全球购物
Rosetta Stone官方网站:语言学习
2019/01/05 全球购物
药学专业大学生自荐信
2013/09/28 职场文书
2014两会优秀的心得体会范文
2014/03/17 职场文书
社区交通安全实施方案
2014/03/22 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
2015年小学美术工作总结
2015/05/25 职场文书
法律意见书范本
2015/06/04 职场文书
CPU不支持Windows11系统怎么办
2021/11/21 数码科技
Nginx的基本概念和原理
2022/03/21 Servers