偵測瀏覽器縮放比例

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

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

Plugin網址:
yonran / detect-zoom

引入js後,照他的範例寫偵測zoom scale的code:
  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

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

zoom

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

留言