javascript檢測瀏覽器的縮放狀態實作程式碼_javascript技巧

這裡所說的縮放不是指瀏覽器大小的縮放，而是指瀏覽器網頁內容的百分比縮放（按Ctrl和 號鍵或-號鍵的縮放）。
偵測這種縮放有很種方法，QQ空間都透過flash來偵測瀏覽器是否處於縮放。這裡提供javascript的方法來偵測瀏覽器的縮放。
對於 IE6，就直接無視了，因為 IE6 只能對文本進行縮放。
先來說說瀏覽器提供的標準檢測接口，window.devicePixelRatio 是設備上物理像素和設備獨立像素的比例，該屬性就可以用於檢測網頁是否被縮放了。在普通的 PC 瀏覽器上，在預設無縮放的情況下其預設值為 1。目前Firefox、chrome等都得到了很好的支援。
好吧，接下來該說說 IE 的處理方法了。 IE 提供了 window.screen.deviceXDPI 和 window.screen.logicalXDPI 兩個屬性，deviceXDPI 就是對應的裝置上的實體像素，而 logicalXDPI 就是對應了裝置獨立像素的比例。估計標準的檢測介面也只是基於 IE 這種方法的一種改進。這兩個屬性在 windows XP 以上的系統上的預設值都是 96，因為系統預設的就是 96dpi 。
對於以上兩種都不支援的瀏覽器，還可以利用window.outerWidth 和 window.innerWidth 這兩個屬性。 outerWidth 傳回的是視窗元素的外部實際寬度，innerWidth 傳回的是視窗元素的內部實際寬度，這兩個寬度都包含了捲軸在內的寬度。
有了這些屬性基本上就可以搞定 PC 瀏覽器上常見的瀏覽器了。實作程式碼如下：

detectZoom 函數的回傳值如果是 100 就是預設縮放級別，大於 100 則是放大了，小於 100 則是縮小了。

function detectZoom (){ 
  var ratio = 0,
    screen = window.screen,
    ua = navigator.userAgent.toLowerCase();

   if (window.devicePixelRatio !== undefined) {
      ratio = window.devicePixelRatio;
  }
  else if (~ua.indexOf('msie')) {  
    if (screen.deviceXDPI && screen.logicalXDPI) {
      ratio = screen.deviceXDPI / screen.logicalXDPI;
    }
  }
  else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
    ratio = window.outerWidth / window.innerWidth;
  }
  
   if (ratio){
    ratio = Math.round(ratio * 100);
  }
  
   return ratio;
};

原創文章，轉載請註明： 轉載自前端開發