html获取屏幕、浏览器、页面的高度与宽度

一个页面的展示，从外到内的容器为：屏幕、浏览器以及页面本身；对应关系如下：
HTML元素–>页面–>浏览器–>屏幕

一、屏幕

screen.height //屏幕高度

screen.width //屏幕宽度

screen.availHeight //屏幕可用高度，即屏幕宽度减去上下任务栏后的高度

screen.availWidth //屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度

screen.height - screen.availHeight //任务栏高度

二、浏览器

window.outerHeight //浏览器高度

window.outerWidth //浏览器宽度

window.innerHeight //浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度

window.innerWidth //浏览器内页面可用宽度；此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。

window.outerHeight - window.innerHeight //工具栏高/宽度，包含了地址栏、书签栏、浏览器边框等范围

三、页面信息

body.offsetHeight // body总高度

body.offsetWidth // body总宽度

body.clientHeight // body展示的高度；表示body在浏览器内显示的区域高度

body.clientWidth // body展示的宽度；表示body在浏览器内显示的区域宽度

window.innerHeight - body.clientHeight // 滚动条高度/宽度

参考文章：https://www.cnblogs.com/chris-oil/p/6662894.html