JavaScript-获取屏窗与视窗、文档宽高 实例：1920*1080的电脑屏幕

clientw = window.innerWidth; //1920（包含滚动条）
clienth = window.innerHeight; //883（不含工具条）

clientw = window.outerWidth; //1920（包含滚动条）
clienth = window.outerHeight; //883（包含工具条）

window.innerWidth == window.outerWidth //他们两是相等了，都包含的滚动条的宽度

唯一不同的在高度，如：

当我们未按下F12的时候，也就是当我们暂时没有工具条的时候

clientw = window.innerHeight; //883（不含工具条）
clienth = window.outerHeight; //883（含工具条）

当我们按下F12的时候，就会发现区别很明显了

clientw = window.innerHeight; //627（不含工具条）
clienth = window.outerHeight; //883（含工具条）

clientw = document.body.clientWidth; //1903（不包含滚动条）
clienth = document.body.clientHeight; //866（不包含工具条）

clientw = document.body.offsetWidth; //1903（不包含滚动条，含边线）
clienth = document.body.offsetHeight; //866（不包含工具条，含边线）

/*我们给body设置一个1像素的边框*/
body { border: 1px solid #000000;}

clientw = document.body.clientWidth; //1903（不含滚动条）
clienth = document.body.clientHeight; //610（不含工具条）

clientw1 = document.body.offsetWidth; //1905（不含滚动条，含边线）
clienth2 = document.body.offsetHeight; //612（不含工具条，含边线）

最终显示为：

我们发现client...没有加上body的边线而offset...包含的边线，这就他们明显的区别

在这里还有一小细节，就是当你的内容高度超出了视窗，滚动条产生自带的滚动条时，你需要再次调用这个方法来获取的你的视窗。

方法解析步骤：

   1、获取视窗可用区域的宽度：1920

   2、判断是否超出视窗，超出加载滚动条

   3、再次调用方法获取视窗可用区域宽度：1903（这里才是真正不包含滚动条的值）

为了避免获取到的值没有减掉滚动条

我们可以调用两次，比如这样：

clientw = document.body.clientWidth;//1920
clientw = document.body.clientWidth;//1903

clientw = document.body.scrollWidth; //1903（不含滚动条）
clienth = document.body.scrollHeight; //1269（不含工具条）

body {
    border: 1px solid #000000;
}
.content {/*比如这是文档的全部内容*/
  width: 2000px;
  height: 1500px;
  background-color: #808080;
}

clientw = window.screen.width; //1920
clienth = window.screen.height; //1080

clientw = window.screen.availWidth; //1920
clienth = window.screen.availHeight; //1040