获取屏幕宽高度与可视区域宽高度（availWidthclientWidthwidthinnerWidth）
Posted 心欲无痕
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了获取屏幕宽高度与可视区域宽高度（availWidthclientWidthwidthinnerWidth）相关的知识，希望对你有一定的参考价值。
经常会遇到需要获取屏幕宽度、高度，可视区域宽度、高度等问题，也就常跟这几个打交道，一不小心，还真爱弄混淆了。
先来列举下这几个吧：
screen.availHeight、screen.availWidth；
screen.height、screen.width；
document.documentElement.clientWidth、document.documentElement.clientHeight；
window.innerWidth、window.innerHeight。
（1）、screen.availHeight与screen.availWidth。
screen.availHeight:用来显示浏览器的屏幕的可用高度，即不包含window任务栏的高度（如下图所示）。
screen.availWidth：用来显示浏览器的屏幕的可用宽度。
（2）、screen.height与screen.width。
screen.height：用来获取屏幕总高度，包括window任务栏的高度，即获取屏幕分辨率的高度。
screen.width：用来获取屏幕总宽度，即获取屏幕分辨率的宽度。
（3）、document.documentElement.clientWidth与document.documentElement.clientHeight
document.documentElement.clientWidth：用来返回文档可视区域的宽度
document.documentElement.clientHeight：用来返回文档可视区域的高度（不包含浏览器顶部的标签栏等）。如下图所示
（4）、window.innerWidth与window.innerHeight。
window.innerWidth：返回窗口的文档显示区的宽度（IE8及以下版本不支持）
window.innerHeight：返回窗口的文档显示区的高度（IE8及以下版本不支持）
（3）、（4）两种情况呢，其实作用是一样的
以上是关于获取屏幕宽高度与可视区域宽高度（availWidthclientWidthwidthinnerWidth）的主要内容，如果未能解决你的问题，请参考以下文章