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...包含的边线，这就他们明显的区别

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