一個由於系統字號設置致使的rem計算渲染異常問題

 

測試同窗忽然拿着一部手機過來講，H5渲染各個元素都變大了，有些元素撐出了屏幕外面。

原本覺得是某個Webview的渲染兼容問題，結果發現全部的瀏覽器都這樣。

莫名其妙，隱約感受是 rem計算出了問題，開始一點點查。

由於，組內移動端項目，統一約束了寬度滿屏7.5rem，因此，先看看這個比例：

$("body").append("<div id='flag' style='width:100%;height:1rem;'></div>");
alert($("#flag").width()/$("#flag").height());

 以下圖，正常是7.5，測試同窗拿來的bug機，6.52。。。尼瑪，什麼鬼。 

其實，最開始，並無想爲啥會不是7.5，當時只是解決問題，頁面開始渲染的時候，我先偷偷算一下當前渲染的是否是7.5，若是不是，我給強行掰過來。

正常狀況下：

根節點的 fontsize=屏幕寬度/7.5

如今出了異常，系統實際寬度滿屏6.52個rem的狀況下，渲染效果變大了。在初始計算的fontsize基礎上作了比例放大加持，那解決方案應該是：

相應比例縮小一下初始的fontsize，改成fontsize=fontsize*這個比例（即6.52/7.5）

 代碼以下：

/*
 * html 頭部最先執行的js片斷 用於rem計算等
 */
(window.onresize = function() {
    var maxLimitW = 768,
        remCount = 7.5,
        clientW = document.documentElement.clientWidth,
        hasReadyInit;
    var initFontSize = Math.min(maxLimitW, clientW) / remCount;
    document.documentElement.style.fontSize = initFontSize + 'px';

    // 修正系統設置了字號以後，支持動態字體的APP會強制調整網頁font-size，致使rem方式的適配亂版問題 @2017.8
    if (clientW >= maxLimitW) return;
    if (hasReadyInit) return; //已經註冊過ready修正事件了
    document.addEventListener('DOMContentLoaded', function() {
        var remFixDom = document.createElement("div");
        remFixDom.style.cssText = "width:100%;height:1rem;opacity:0;position:absolute;z-index:-9999;";
        document.body.appendChild(remFixDom);
        var render = window.getComputedStyle(remFixDom);
        var rRate = (render.width.slice(0, -2) / render.height.slice(0, -2)).toFixed(1);
        if (rRate != remCount) document.documentElement.style.fontSize = initFontSize * (rRate / remCount) + "px";
        hasReadyInit = true;
    });

})();

這個時候，我忽然意識到，尼瑪，是否是改了系統裏的字號設置，一看，果真是。。。

雖然解決了問題，可是，其實這樣並非太好，由於畢竟用戶改了系統字號設置，他就是想看更大的東西的。

因此，原則上來講，css的佈局上，應該更流式佈局一些，而不是所有rem作等比縮放。

可是呢，這樣下來，UI和前端開發成本就都高了。

得不償失，收益比低呢。

哈哈。