常用:

JS 获取浏览器窗口大小

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 获取窗口宽度
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高）

js获取浏览器高度的更多相关文章

  1. js获取浏览器高度和宽度值,尽量的考虑了多浏览器。

    js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ...

  2. 【转】js 获取浏览器高度和宽度值(多浏览器

    原文地址:http://www.jb51.net/article/19844.htm js获取浏览器高度和宽度值,尽量的考虑了多浏览器. IE中: document.body.clientWidth ...

  3. JS获取浏览器高度 并赋值给类

    在给网站做轮播焦点图的时候,如果需要全屏的话,可以用下面的jQuery来获取浏览器高度,然后赋值给类. $(window).load(function () { var maxHeight = 0; ...

  4. js 获取浏览器高度和宽度值(多浏览器)（转）

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  5. 转：JS获取浏览器高度和宽度

    发现一篇好文章,汇总到自己的网站上. IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> ...

  6. js 获取浏览器高度和宽度值(多浏览器)

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  7. 不同浏览器JS获取浏览器高度和宽度

    摘自:http://blog.csdn.net/lai_gb/archive/2009/07/04/4320956.aspx IE中: document.body.clientWidth ==> ...

  8. JS获取浏览器高度和宽度

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

  9. [转]js 获取浏览器高度和宽度值(多浏览器)（js获取宽度高度大全）

    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...

随机推荐

  1. mysql测试题

    MySQL测试题 一.表关系 请创建如下表,并创建相关约束 创建数据库create database school charset utf8; 建表create table class(cid int ...

  2. MVC中使用Entity Framework 基于方法的查询学习笔记 （二）

    解释,不解释: 紧接上文,我们在Visual Studio2012中看到系统为我们自动创建的视图(View)文件Index.cshtml中,开头有如下这句话: @model IEnumerable&l ...

  3. mysql 学习官网

    http://www.runoob.com/mysql/mysql-install.html

  4. toArray(),toJson(),hidden([ ]),visible([ ])

    toArray() 转换为数组,hidden()不输出的字段 public function index(){ $user = model('User'); $data = $user::)-> ...

  5. shell 指定范围产生随机数

    #/bin/bash echo "---------------产生随机数---------------" read -p "请输入起始数:" a read - ...

  6. 关于python中的字符串编码理解

    python2.x 中中间编码为unicode,一个字符串需要decode为unicode,再encode为其它编码格式(gbk.utf8等) 以gbk转utf8为例: s = "我是字符串 ...

  7. CPU状态信息us,sy,ni,id,wa,hi,si,st含义

    转自:http://blog.csdn.net/sasoritattoo/article/details/9318893 转自:http://fishermen.iteye.com/blog/1995 ...

  8. ubuntu_tftp服务搭建

    搭建过程: 1. sudo apt-get install tftpd-hpa tftp-hpa是客户端 tftpd-hpa是服务器端 2.建立目录 执行:mkdir /home/wmx/Deskto ...

  9. SQL2005 表分区亲测

    --增加文件组 alter database Test add filegroup [FG1] go alter database Test add filegroup [FG2] GO alter ...

  10. BitHacks

    备份文件时看到的.我以前居然下过这东西. 2016-12-4 12:05:52更新 纯文本格式真棒.假如使用word写的我能拷过来格式还不乱?? Markdown真好. Bit Hacks By Se ...