JS获取视口
js提供了大量的属性来描述窗口尺寸，但是在不同的浏览器中，存在着一些细节差异，本文用来记录这些容易忘记的小细节
标准模式 PC端 屏幕尺寸1920*1080 全屏浏览器测试 格式 宽 / 高
| 浏览器/属性 | inner | documentElement.client | body.client |
| i8 | undefined / undefined | 1899 / 961 | 3000 /3500 |
| i9+ | 1920 / 982 | 1903 /965 | 3000 /3500 |
| chrome | 1920 / 974 | 1903 / 957 | 3000 / 3500 |
| firefox | 1920 / 974 | 1903 / 957 | 3000 / 3500 |
从图上可以看出，innerWidth是很适用的，除了ie8及其以下版本不支持外，所有的浏览器都能返回正确的视口值
innerHeight在ie9+以上的浏览器中比其他浏览器多了8px，这是因为IE9+的浏览器头部高度为58px，而其他两款浏览器的头部高度为66px，比ie多占用了8px导致的，所以该值也是普遍适用的。
在ie9+以上,和其他的浏览器中，documentElement.cilentWidth，height，比起inner少了17px，因为滚动条占居17px
而在ie8中，该值比在ie9+的浏览器中还少了4px，目前不知道原因
在没有滚动的方向上，两者值是相同的，如果需要统一包含或者不包含滚动条，可以在这两种值中，加上或者减去17px，就能保持一致
body.clientWidth明显是不行的，无论在那个版本中，该属性值保存的是body元素的尺寸，当然如果视口与body一样大的话，也可以使用该值
总结:inner可以视为是包含滚动条尺寸的视口，documentElement.client可以视为不包含滚动条尺寸的视口，两者在存在滚动条的方向上相差17px
除此之外没有区别
要注意的是由于ie浏览器的头部高度比其他浏览器矮了8px，所以在视口的高度上比其他浏览器多了8px，所以IE看上去比较高。</>
body.client不能拿来判断视口尺寸。
混杂模式 PC端 屏幕尺寸1920*1080 全屏浏览器测试 格式 宽 / 高
| 浏览器/属性 | inner | documentElement.client | body.client |
| i8 | undefined / undefined | 1899 / 961 | 3000 /3500 |
| i9 | 1920 / 982 | 1903 /965 | 3000 /3500 |
| i10+ | 1920 / 982 | 1903 /965 | 1903 /965 |
| chrome | 1920 / 974 | 1903 / 3500 | 1903 / 957 |
| firefox | 1920 / 974 | 1903 / 3500 | 1903 / 957 |
混杂模式下，inner系列的表现和标准模式下一致，ie8仍然不支持，ie9+以上的浏览器仍然高了8px
混杂模式下的ie8,ie9与标准模式下的ie8,ie9的三个值完全一致，但是从ie10+开始，body.client就不一样了，ie10+的浏览器中的body.client,和其他两个属性相同，不再代表body元素的尺寸
所以，在混杂模式下，ie10+的浏览器，你可以任意使用，因为三者的值都是相同的
chrome和firefox中的body.client也不再代表body元素的尺寸，也可以使用
docuementElement.clientHeight也跟着抽风了，在混杂模式下该height代表body元素的height
总结:不要开启混杂模式
