有关获取各样浏览器可见窗口大小

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、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中: 
365体育官网,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指向另贰个页面,如下所示

365体育官网 1

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

365体育官网 2

 

私家精通:document.documentElement.clientWidth是该页面包车型地铁大幅度

 

如有不客观,请留言,感激

 

相关文章