浏览器宽高认识,你必须看我的

1. window.innerWidth ：浏览器docment宽度
2. window.outerWidth ：反之：整个浏览器的宽度
3. window.innerHeight ：浏览器docment宽度
4. window.outerHeight ：反之
5. 兼容性:IE 8 及更早 IE 版本不支持该属性。一句话：webapp开发不用担心系统浏览器调用让这个元素不能用。如果是pc端 应该考虑一下了，为了弥补IE8不可用可以替换 document.documentElement.clientHeight， document.documentElement.clientWidth对比兼容性，一句话卧槽，俩个刚好互补。千万不要尝试去使用window.screen下的属性，如果面试你可以告诉他，这个元素也能获取宽高。
   大家记住一点客户没人会去看控制台。

描述：不做任何操作下我们使用innerWidth以及outerWidth获取的宽度是一样的。按F12，这个时候innerWidth为docment宽度，outerWidth为浏览器宽度

1. window.screen.height ：屏幕物理分辨率的高
2. window.screen.width ：屏幕物理分辨率的宽
3. window.screen.availHeight ：屏幕可用工作区高度
4. window.screen.availWidth ：屏幕可用工作区宽度
   兼容性:IE 10 及更早 IE 版本不支持该属性且其他浏览器也兼容的不好,一句话少用。
5. window.devicePixelRatio屏幕缩放因子： window.screen.width * window.devicePixelRatio (缩放因子与物理分辨率的乘积)屏幕逻辑分辨率：
   兼容性:IE 8 及更早 IE 版本不支持该属性且其他浏览器版本太低,一句话多用。

描述：少用

1. document.body.clientWidth ：浏览器body宽度(包括如果body有边线则不包括边线宽)
2. document.body.clientHeight ：浏览器body高度(包括如果body有边线则不包括边线宽)
   document.documentElement.clientHeight ：第三种方式获取的是可视区的高
   document.documentElement.clientWidth：第三种方式获取的是可视区的宽
   兼容性非常好，不用考虑 安卓浏览器2.1 - 4.4.4 /苹果浏览器3.1 - 5.1/Chrome 4 - 42
3. document.body.offsetWidth ：浏览器docment宽度(包括如果body有边线则包括边线宽)
4. document.body.offsetHeight ：浏览器docment高度(包括如果body有边线则包括边线宽)
   兼容性非常好，不用考虑 IE7以下
5. document.body.scrollWidth ：浏览器docment宽度（刷新出来的所有宽度，包括可以滚动的宽度）
6. document.body.scrollHeight ：浏览器docment宽度（刷新出来的所有高度，包括可以滚动的高度）
   兼容性非常好
7. document.body.scrollTop ：（待解）
8. document.body.scrollLeft ：（待解）