JS获取body、屏幕、屏幕可用区域等的宽高

JS原生获取各种高度

clientWidth

//网页可见区域宽
document.body.clientWidth;
//网页可见区域高
document.body.clientHeight;

offsetWidth

//网页可见区域宽(包括边线的宽)
document.body.offsetWidth;

//网页可见区域高(包括边线的高)
document.body.offsetHeight;

scrollWidth

//网页正文全文宽
document.body.scrollWidth;

availHeight

//屏幕可用工作区高度
window.screen.availHeight;

//屏幕可用工作区宽度
window.screen.availWidth;

注意，在手机端，比如在safari下，由于safari下方有地址栏等，所以应该获取的是“屏幕可用的工作区高度”，已IPone8P为例，在safari下window.screen.availHeight=694，而window.screen.height则获取的是整个屏幕的高度，为736。需要特别注意

JQ获取各种宽高

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

//浏览器时下窗口文档body的高度
$(document.body).width()

 //浏览器时下窗口可视区域高度
$(window).height()

 //浏览器时下窗口文档的高度
$(document).height()

//浏览器时下窗口文档body的高度
$(document.body).height()

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

 //浏览器时下窗口可视区域宽度
$(window).width()

//浏览器时下窗口文档对于象宽度
$(document).width()

 //获取滚动条到顶部的垂直高度
$(document).scrollTop()

//获取滚动条到左边的垂直宽度
$(document).scrollLeft()