一、屏幕宽高相关
屏幕高度就是你的整个屏幕高度（开机会亮的那片区域的高度），相关的其他高度划分很简单，就是以任务栏为分界线从而分为两部分。
screen.height ：屏幕高度。
screen.width ：屏幕宽度。
screen.availHeight ：屏幕可用高度。即屏幕高度减去上下任务栏后的高度。
screen.availWidth ：屏幕可用宽度。即屏幕宽度减去左右任务栏后的宽度。
二、浏览器宽高相关
浏览器高度就是你能看到的浏览器高度（如果你改变浏览器窗口大小，下边获取的值也会改变），相关的其他高度由工具栏为两部分。
window.outerHeight ：浏览器高度。
window.outerWidth ：浏览器宽度。
window.innerHeight ：浏览器内页面可用高度；此高度包含了水平滚动条的高度(若存在)。可表示为浏览器当前高度去除浏览器边框、工具条后的高度。
window.innerWidth ：浏览器内页面可用宽度；此宽度包含了垂直滚动条的宽度(若存在)。可表示为浏览器当前宽度去除浏览器边框后的宽度。
工具栏高/宽度 ：包含了地址栏、书签栏、浏览器边框等范围。如：高度，可通过浏览器高度 - 页面可用高度得出，即：window.outerHeight - window.innerHeight。
三、页面宽高相关
文档宽高这一块内容很多也很杂，这里先从基础的clientWidth、clientHeight、offsetWidth、offsetHeight说起。
clientWidth与clientHeight：返回元素的宽度或高度（padding+content）。
offsetWidth与offsetHeight：返回元素的宽度或高度（padding+content+border）。
scrollWidth与clientWidth：返回元素的宽度或高度（padding+content）。
document.documentElement.clientWidth; 视口大小，不包括滚动条
document.documentElement.clientHeight; 视口大小，不包括滚动条
document.documentElement.offsetWidth; 视口大小，不包括滚动条
document.documentElement.offsetHeight; 文档大小
document.body.clientWidth; 视口大小，不包括滚动条
document.body.clientHeight; 文档大小
document.body.offsetWidth; 文档大小
document.body.offsetHeight; 文档大小
var scrollWidth = Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);
var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
关于这块的东西实在过于混乱，网上虽有众多博客讲解，但本人在测试时发现这些博客准确度并不高，限于本人能力有限，尚且无法总结出规律，这里就贴出几篇对我帮助比较大的博客地址。