JS与jQuery获取屏幕宽高及可视区域的方法汇总

JavaScript获取屏幕与页面尺寸

在JavaScript中，可以通过以下属性获取网页及屏幕的相关信息：

获取网页可见区域的宽度，使用 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。

jQuery获取屏幕与页面尺寸

在jQuery中，可以通过以下代码获取相关尺寸信息：

$(document).ready(function(){
alert($(window).height()); //获取浏览器当前窗口可视区域高度
alert($(document).height()); //获取浏览器当前窗口文档的高度
alert($(document.body).height()); //获取浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true)); //获取浏览器当前窗口文档body的总高度，包括border、padding和margin
alert($(window).width()); //获取浏览器当前窗口可视区域宽度
alert($(document).width()); //获取浏览器当前窗口文档对象的宽度
alert($(document.body).width()); //获取浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true)); //获取浏览器当前窗口文档body的总宽度，包括border、padding和margin
　　})