JS獲取視口

時間 2019-12-15

原文原文鏈接

js提供了大量的屬性來描述窗口尺寸，可是在不一樣的瀏覽器中，存在着一些細節差別，本文用來記錄這些容易忘記的小細節chrome

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

標準模式 PC端屏幕尺寸1920*1080 全屏瀏覽器測試格式寬 / 高瀏覽器

從圖上能夠看出，innerWidth是很適用的，除了ie8及其如下版本不支持外，全部的瀏覽器都能返回正確的視口值測試

innerHeight在ie9+以上的瀏覽器中比其餘瀏覽器多了8px，這是由於IE9+的瀏覽器頭部高度爲58px，而其餘兩款瀏覽器的頭部高度爲66px，比ie多佔用了8px致使的，因此該值也是廣泛適用的。spa

在ie9+以上,和其餘的瀏覽器中，documentElement.cilentWidth，height，比起inner少了17px，由於滾動條佔居17pxfirefox

而在ie8中，該值比在ie9+的瀏覽器中還少了4px，目前不知道緣由ci

在沒有滾動的方向上，二者值是相同的，若是須要統一包含或者不包含滾動條，能夠在這兩種值中，加上或者減去17px，就能保持一致table

body.clientWidth明顯是不行的，不管在那個版本中，該屬性值保存的是body元素的尺寸，固然若是視口與body同樣大的話，也可使用該值cli

總結:inner能夠視爲是包含滾動條尺寸的視口，documentElement.client能夠視爲不包含滾動條尺寸的視口，二者在存在滾動條的方向上相差17px總結

除此以外沒有區別tab

要注意的是因爲ie瀏覽器的頭部高度比其餘瀏覽器矮了8px，因此在視口的高度上比其餘瀏覽器多了8px，因此IE看上去比較高。</>

body.client不能拿來判斷視口尺寸。

混雜模式 PC端屏幕尺寸1920*1080 全屏瀏覽器測試格式寬 / 高

混雜模式下，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

總結:不要開啓混雜模式

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。