偵測瀏覽器縮放比例

之前提過如果設計的頁面，chrome預設字級最小是12px，也就是說小於12px的字體，都會設為12px，要解決的方法就是使用-webkit-text-size-adjust:none;這個方法，可是即使用了這個方法，在Zoom out的時候，字體也不會縮到12px以下，這也是chrome的限制，所以網頁就會破版啦..

所以後來我們決定，當縮小到一定程度，提示使用者再下去會破版，所以也找到這個幫忙偵測zoom scale的plugin。

Plugin網址：
yonran / detect-zoom

引入js後，照他的範例寫偵測zoom scale的code：

view plaincopy to clipboardprint

1. 'use scrict';   
2. var zoomLevel = document.getElementById('zoom-level');   
3. window.onresize = function onresize() {   
4.   var r = DetectZoom.ratios();   
5.   zoomLevel.innerHTML =   
6.     "Zoom level: " + r.zoom +   
7.     (r.zoom !== r.devicePxPerCssPx   
8.         ? "; device to CSS pixel ratio: " + r.devicePxPerCssPx   
9.         : "");   
10.         if(r.devicePxPerCssPx<0.75)alert("too small");   
11. }   
12. onresize();   
13.   
14. if ('ontouchstart' in window) {   
15.   window.onscroll = onresize;   
16. }  

Demo

可以滾滑鼠滾輪，可以看到比例的數值，當小於某個比例，有視窗提示訊息。



有興趣可以研究source code，另外也可以看這篇參考一下。
检测浏览器当前的缩放等级(Detecting browser zoom level)