摘要：在寫響應式H5頁面的時候，我常常會用rem字體，為了兼容多個分辨率的設備，需要寫多個@media標簽，太麻煩並且不夠精致，尤其是移動端的頁面往往打不到我想要的效果，後來就用js替代了css的@media，下面是代碼。（以下方案以750px的設計圖）

方案一、缺點：瀏覽器裏使用沒問題，安卓和ios設備裏嵌入的時候，會受到系統字體設置的影響，原理就是當系統設置超大字體的時候，會改變html的font-size大小，引起頁面bug。

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = ‘orientationchange‘
 
 in window ? ‘orientationchange‘ : ‘resize‘,
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            if(clientWidth>=750){
                docEl.style.fontSize = ‘100px‘;
            }else{
                docEl.style.fontSize
 
 = 100 * (clientWidth / 750) + ‘px !important‘;
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener(‘DOMContentLoaded‘, recalc, false);
})(document, window);

方案二、重置了系統設置的字體，解決了此bug，暫無發現有其他問題

function htmlFontSize(){
 
 
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); 
    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0); 
    var width = w > h ? h : w; 
    width = width > 750 ? 750 : width; 
    var fz = ~~(width*100000/37.5)/20000; 
    document.getElementsByTagName("html")[0].style.cssText = ‘font-size: ‘ + fz +"px"; 
    var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.replace(‘px‘,‘‘)*10000)/10000;   
    if (fz !== realfz) { 
        document.getElementsByTagName("html")[0].style.cssText = ‘font-size:‘ + fz * (fz / realfz)+"px"; 
    } 
}

題外、WebView加上這個設置後,可以屏蔽系統設置的字體影響，這樣就不用js再去判斷了。

webview.getSettings().setTextZoom(100);

感謝開源，文中部分文字源自網絡，如有侵權，請聯系刪除
周明傑

javascript控制rem字體大小