不同的宽高定义
//网页可见区域宽 document.body.clientWidth //网页可见区域高 document.body.clientHeight //网页可见区域宽(包括边线和滚动条的宽) document.body.offsetWidth //网页可见区域高(包括边线的宽) document.body.offsetHeight //网页正文全文宽 document.body.scrollWidth //网页正文全文高 document.body.scrollHeight //网页被卷去的高 document.body.scrollTop //网页被卷去的左 document.body.scrollLeft //网页正文部分上 window.screenTop //网页正文部分左 window.screenLeft //屏幕分辨率的高 window.screen.height //屏幕分辨率的宽 window.screen.width //屏幕可用工作区高度 window.screen.availHeight //屏幕可用工作区宽度 window.screen.availWidth //屏幕设置(位彩色) window.screen.colorDepth //屏幕设置(像素/英寸) window.screen.deviceXDPI //BODY对象宽度 document.body.clientWidth //BODY对象高度 document.body.clientHeight //可见区域宽度 document.documentElement.clientWidth //可见区域高度 document.documentElement.clientHeight
获取不同宽高的方法
var winWidth; var winHeight; // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } else if ((document.body) && (document.body.clientWidth)) { winWidth = document.body.clientWidth; } // 获取窗口高度 if (windows.innerHeight) { winHeight = windows.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; }
===================2015年12月16日更新====================
Window对象
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight //浏览器窗口的内部高度 window.innerWidth //浏览器窗口的内部宽度
对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实用的 JavaScript 方案(涵盖所有浏览器):
<script> var winWidth=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var winHeight=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; </script>
Screen对象
window.screen 对象在编写时可以不使用 window 这个前缀。
screen.availWidth //可用的屏幕宽度 screen.availHeight //可用的屏幕高度