JS获取视口

js提供了大量的属性来描述窗口尺寸，可是在不一样的浏览器中，存在着一些细节差别，本文用来记录这些容易忘记的小细节

目前只测试了chrome,firefox,ie8,9,10,11(使用ie11的仿真模式)

标准模式 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

总结:不要开启混杂模式