rem佈局在部分手機上顯示不正常問題

問題描述：經過rem計算的寬度和手機上實際顯示的寬度不一致，改用px跟預想一致。

致使緣由：部分安卓手機或者webview調整了系統默認字體大小。此時在html根節點上設置的20px已經不是20px了，致使計算rem寬度出錯。

解決辦法：

一、計算實際字號：

var actualSize = parseFloat(window.getComputedStyle(document.documentElement)["font-size"]);

二、計算縮放比例：

var scale = actualSize / rem; //rem爲本來設置的根節點字號

三、爲保持頁面其它元素不受影響，直接縮放rem：

var remScaled = rem / scale;

完整代碼：

;(function(win) {
     var docEl = win.document.documentElement,
         tid;
 
     function refreshRem() {
         var width = docEl.getBoundingClientRect().width;
         var rem = width / 750*100;//以750px爲原稿，除以100可得各元素的rem
         docEl.style.fontSize = rem + "px";
         var actualSize = parseFloat(window.getComputedStyle(docEl)["font-size"]);
         if (actualSize !== rem) {
             var remScaled = rem / ( actualSize / rem );
             docEl.style.fontSize = remScaled + "px"
         }
    }
 
     function dbcRefresh() {
         clearTimeout(tid);
         tid = setTimeout(refreshRem, 100)
     }
 
     win.addEventListener("resize", function() { dbcRefresh() }, false);
     win.addEventListener("pageshow", function(e) {
         if (e.persisted) { dbcRefresh() }
     }, false);
     refreshRem();
})(window);