当你看到 screen.width/height、window.innerWidth/innerHeight、window.pageXOffset/pageYOffset、document.documentElement.clientHeight/clientWidth 等，你是否已经眼花了。不管你是不是眼花，我反正不仅眼花，脑子也短路了。下面我们一起来研究一下他们到底指的是哪个width和height。
注： 一下全是在 chrome 浏览器下测试
1. screen （window.screen）
包含有关用户屏幕的信息 , window 可忽略不写, 所以 screen.width/height 表示 用户屏幕的宽高
2. window
表示浏览器窗口。
window.innerWidth/innerHeight 表示当前浏览器的文档区域的宽高(不包括工具栏)
window.outerWidth/outerHeight 表示当前浏览器的整个宽高(包括工具栏)
window.screenTop / screenLeft 表示浏览器离屏幕的距离
window.pageXOffset/pageYOffset 表示文档水平和垂直位移距离
<!DOCTYPE html>
<html>
<head>
<title>test viewport</title>
<meta name="viewport" content="" >
<style type="text/css">
#main {
height: 2000px;
200px;
/*height: 200px;*/
padding: 2px;
margin: 3px;
border: 1px solid #eee;
background-color: #f0f0f0;
}
img {
margin-top: 50px;
}
</style>
</head>
<body>
<div id="main">
test
<img class="img" src="./test.png">
</div>
</body>
</html>
3. document
表示html文档对象
clientWidth 与 cilentHeight 表示元素的宽和高，包括内边距，不包括边框和外边距滚动条， 它属于每个文档元素的方法
offsetWidth 与 offsetHeight 与clientWidth 区别就是 包含 border边框
总结：
后续继续补充，欢迎大家补充提出错误，谢谢