javascript瀏覽器縮放的檢測實現方法

很多 WEB 開發人員可能都會碰到這種頭痛的問題，就是當使用者對頁面進行縮小或放大時，原本好好的布局就被破壞了。如果讓網頁支援自適應的縮小和放大布局，對於開發人員來說是一個不小的挑戰。

在我看來如果使用者有意識的去對網頁進行縮放，那麼就應該知道縮放會破壞布局。還有很多使用者其實壓根不知道自己是何時對網頁進行了縮放，此時就需要提醒使用者應該將瀏覽器的縮放層級重設成預設的比例。

說到瀏覽器的縮放檢測，可能有好幾種方法都可以實現，從檢測 CSS 樣式到檢測 Flash 的尺寸，可以說是各顯神通，但我都覺得有點麻煩。其實還有更簡便的方法的，當然各個瀏覽器的檢測方法又有不同，對於 IE6，就直接無視了，因為 IE6 只能對文本進行縮放。

先來說說瀏覽器提供的標準檢測介面，window.devicePixelRatio 是裝置上物理像素和裝置獨立像素的比例，該屬性就可以用於檢測網頁是否被縮放了。在普通的 PC 瀏覽器上，在預設無縮放的情況下其預設值是 1。可惜這麼方便的屬性目前只有 Firefox 支援。

好吧，接下來該說說 IE 的處理方法了。IE 提供了 window.screen.deviceXDPI 和 window.screen.logicalXDPI 兩個屬性，deviceXDPI 就是對應的裝置上的物理像素，而 logicalXDPI 就是對應了裝置獨立像素的比例。估計標準的檢測介面也只是基於 IE 這種方法的一種改進。這兩個屬性在 windows XP+ 以上的系統上的預設值都是 96，因為系統預設的就是 96dpi 。

對於 webkit 和 opera，它們都支援 window.outerWidth 和 window.innerWidth 這兩個屬性。outerWidth 返回的是視窗元素的外部實際寬度，innerWidth 返回的是視窗元素的內部實際寬度，這兩個寬度都包含了捲軸在內的寬度。

有了這些屬性基本就可以搞定 PC 瀏覽器上常見的瀏覽器了。實現代碼如下：

代碼如下

複製代碼

var detectZoom = function(){     var ratio = 0,         screen = window.screen,         ua = navigator.userAgent.toLowerCase();     if( ~ua.indexOf('firefox') ){         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 );     }         // 360安全瀏覽器下瀏覽器最大化時詭異的outerWidth和innerWidth不相等     if( ratio === 99 || ratio === 101 ){         ratio = 100;     }         return ratio; };

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