Heim > Web-Frontend > js-Tutorial > JS获取各种浏览器窗口大小的方法_javascript技巧

JS获取各种浏览器窗口大小的方法_javascript技巧

WBOY
Freigeben: 2016-05-16 17:03:55
Original
1276 Leute haben es durchsucht

常用:
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> <BR>function getInfo() <BR>{ <BR>var s = ""; <BR>s = " 网页可见区域宽:" document.body.clientWidth; <BR>s = " 网页可见区域高:" document.body.clientHeight; <BR>s = " 网页可见区域宽:" document.body.offsetWidth " (包括边线和滚动条的宽)"; <BR>s = " 网页可见区域高:" document.body.offsetHeight " (包括边线的宽)"; <BR>s = " 网页正文全文宽:" document.body.scrollWidth; <BR>s = " 网页正文全文高:" document.body.scrollHeight; <BR>s = " 网页被卷去的高(ff):" document.body.scrollTop; <BR>s = " 网页被卷去的高(ie):" document.documentElement.scrollTop; <BR>s = " 网页被卷去的左:" document.body.scrollLeft; <BR>s = " 网页正文部分上:" window.screenTop; <BR>s = " 网页正文部分左:" window.screenLeft; <BR>s = " 屏幕分辨率的高:" window.screen.height; <BR>s = " 屏幕分辨率的宽:" window.screen.width; <BR>s = " 屏幕可用工作区高度:" window.screen.availHeight; <BR>s = " 屏幕可用工作区宽度:" window.screen.availWidth; <P>s = " 你的屏幕设置是 " window.screen.colorDepth " 位彩色"; <BR>s = " 你的屏幕设置 " window.screen.deviceXDPI " 像素/英寸"; <BR>//alert (s); <BR>} <BR>getInfo(); <BR></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的标准在作怪啊

如果在页面中添加这行标记的话 在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高)

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage