1. 程式人生 > >瀏覽器可視區大小簡說(clientWidth,innerWidth)

瀏覽器可視區大小簡說(clientWidth,innerWidth)

ner ber eight style else alert height inner 寬度

  網絡上獲取窗口文檔顯示區的寬高有以下三種方式:

  1:window.innerHeight/innerWidth

   第一種方式獲取的是可視區的寬高,包括了滾動條的寬度

   ps:IE 8 及更早 IE版本不支持這兩個屬性。

  2:document.body.clientHeight/clientWidth

   第二種方式獲取的是 body對象寬度

  3:document.documentElement.clientHeight/clientWidth

   第三種方式獲取的是可視區的寬高,不包括了滾動條的寬度

  兼容寫法如下
var width = window.innerWidth,
height = window.innerHeight;
if (typeof width != number) { //如果類型不為number,表示該瀏覽器不支持innerWidth屬性 if (document.compatMode == CSS1Compat) { //CSS1Compat:判斷是否為標準兼容模式。 width = document.documentElement.clientWidth; height = document.docuementElement.clientHeight; } else { //不是標準模式,則有可能是IE6或及其以下版本(早期的瀏覽器對css進行解析時,並未遵守W3C標準)
width = document.body.clientWidth; //網頁可見區域寬 height = document.body.clientHeight; //網頁可見區域高 } alert(width); alert(height);

   

瀏覽器可視區大小簡說(clientWidth,innerWidth)