JS如何获取屏幕、浏览器及网页高度宽度？

 目的

在浏览器中，用JS获取高度和宽度都各有3种，分别包括屏幕，浏览器和网页的。用来解决各种计算定位问题！以至于我各种记不住，写个随笔方便查询。

屏幕宽高

说明：顾名思义，屏幕宽高是指显示器的分辨率。系统分辨率可以改变这个宽高。

获取方法：

console.log('宽度：', window.screen.width)
console.log('高度：', window.screen.height)

浏览器可用工作区的宽高

说明：浏览器宽高是指浏览器窗口最大化时的宽高，普通的最大化后，一般就是去掉系统任务栏高度，而宽度和屏幕宽是一样的。这个宽高在任务栏占用空间变化时会变化。

　　获取方法：

console.log('宽度：', window.screen.availWidth)
console.log('高度：', window.screen.availHeight)

网页宽高

说明：网页宽高，是指页面所占的宽高，浏览器除了页面内容以外的部分，不计算在内。标签栏，地址栏，书签栏，控制台等全不计算在宽高的范围里面，只有网页内容区域才是。

获取方法：

console.log('宽度：', window.innerWidth)
console.log('高度：', window.innerHeight)

其他（获取浏览器和屏幕各种高度宽度）

js原生方法：

document.body.clientWidth;        //网页可见区域宽(body)

document.body.clientHeight;       //网页可见区域高(body)

document.body.offsetWidth;        //网页可见区域宽(body)，包括border、margin等

document.body.offsetHeight;       //网页可见区域宽(body)，包括border、margin等

document.body.scrollWidth;        //网页正文全文宽，包括有滚动条时的未见区域

document.body.scrollHeight;       //网页正文全文高，包括有滚动条时的未见区域

document.body.scrollTop;          //网页被卷去的Top(滚动条)

document.body.scrollLeft;         //网页被卷去的Left(滚动条)

window.screenTop;                 //浏览器距离Top

window.screenLeft;                //浏览器距离Left

　　jQuery方法：

$(window).height();                    //浏览器当前窗口可视区域高度

$(document).height();                  //浏览器当前窗口文档的高度

$(document.body).height();             //浏览器当前窗口文档body的高度

$(document.body).outerHeight(true);    //浏览器当前窗口文档body的总高度 包括border padding margin

$(window).width();                     //浏览器当前窗口可视区域宽度

$(document).width();                   //浏览器当前窗口文档对象宽度

$(document.body).width();              //浏览器当前窗口文档body的宽度

$(document.body).outerWidth(true);     //浏览器当前窗口文档body的总宽度 包括border padding margin

　　

 

转载于:https://www.cnblogs.com/jameBo/p/10582715.html