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;//

clientw = document.body.clientWidth;//

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; //

clienth = window.screen.height; //

clientw = window.screen.availWidth; //

clienth = window.screen.availHeight; //