JS擷取視口

標籤：捲軸   支援   描述   microsoft   統一   判斷   div   細節   body   

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

總結:不要開啟混雜模式

JS擷取視口