JS获取视口

Posted 2020-10-05 split

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

总结:不要开启混杂模式