有关获取各类浏览器可知窗口大小

document.documentElement.clientWidth

常用:

JS 获取浏览器窗口大小

 1 // 获取窗口宽度
 2 if (window.innerWidth)
 3 winWidth = window.innerWidth;
 4 else if ((document.body) && (document.body.clientWidth))
 5 winWidth = document.body.clientWidth;
 6 // 获取窗口高度
 7 if (window.innerHeight)
 8 winHeight = window.innerHeight;
 9 else if ((document.body) && (document.body.clientHeight))
10 winHeight = document.body.clientHeight;
11 // 通过深入 Document 内部对 body 进行检测,获取窗口大小
12 if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
13 {
14 winHeight = document.documentElement.clientHeight;
15 winWidth = document.documentElement.clientWidth;
16 }

摘自:http://blog.sina.com.cn/s/blog\_6f1f9ead0100n1f6.html

详细:

有关获取各个浏览器可知窗口大小: 
<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、Fire福克斯、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"&gt
就算在页面中添加那行标志的话 在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高)

关于获取种种浏览器可知窗口大小的一小点商讨
<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"&gt;
若果在页面中增加那行标识的话 在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高)

 

上述摘自:http://blog.sina.com.cn/s/blog\_6f1f9ead0100n1f6.html

经本地质度量试和研商再一次对 document.documentElement.clientWidth 进行分解:

 

 每贰个html文件在浏览器中都会被分析为贰个页面,document.documentElement.clientWidth则是赢得本页面包车型地铁幅度。

上边进行比方子表明:

1)
假诺在浏览器全屏,并且张开的一个标签页中只含有三个页面,则document.documentElement.clientWidth即本页面包车型大巴宽度=浏览器的宽度=显示器可用工作区宽度:即window.screen.availWidth;

2)当调治浏览器为非全屏状态时同不时常候张开的二个标签页中只含有二个页面:则document.documentElement.clientWidth即本页面包车型地铁增进率=浏览器的大幅度!=显示屏可用工作区宽度:即window.screen.availWidth;

3)当展开的多个标签页中不只含有三个页面:比方在三个页面的frame中含有一个ifrme,该iframe指向另一个页面,如下所示

图片 1

则iframe指向页面包车型大巴document.documentElement.clientWidth不再等于浏览器宽度,而是等于ifame的幅度

图片 2

 

私家知道:document.documentElement.clientWidth是该页面的增长幅度

 

如有不创立,请留言,多谢

 

相关文章