REM如何無視手機系統字號調整

此問題屬於REM的優化

解決以下問題

在移動端rem佈局中 ， 多數環境多數瀏覽器下rem的計算妥妥的沒有問題 ， 可是部分環境 ， 好比某些軟件內嵌的webview中打開的h5頁面 ， 因爲webview沒有設置相應處理 ， 致使頁面的font-size會收到系統字號大小的影響。

font-size的改變完成會影響頁面的rem的展示值 ， 因此影響在某種程度上來講仍是很嚴重的，

好比今天就被提了個相關的bug TnT

狀況是這樣 ， 在軟件內嵌的h5頁面寫了一個元素 ， 根據特殊的rem計算方式 ， 7rem值徹底能夠展現在各個手機下正常展現 ， 可是某些機型的安卓手機 ， 就發生了變易 ， 異常的大。。。

經檢查發現 ， html中的font-size值是正常值 ，可是出現了一個匪夷所思的狀況！

頁面html上的font-size以50px爲例 ， 在移動端內嵌h5中設置元素height：1rem；最終computed出來的高度居然是53px。。。

整我的就蒙圈了 ， 而後忽然靈光一閃 ， 發現是系統的字號調大了。。。

系統如何處理的這個font-size展現尚未搞清楚。。。可是我想到了一個解決辦法！

（柯南bgm。。。）

頁面中html上font-size的值是rem的計算基本單位 ， 那麼1rem對應的px值就應該等於html的font-size的值；

可是當系統字體放大或縮小後 ， rem基準值50px沒有變化 ， 可是展現值1rem卻等於53px ， 說明系統將此rem值按某種倍率放大了， 那麼咱們的最終目的就是讓頁面保持1rem == 50px就對了

那麼咱們的目的就是要修改html的基準值算出如何讓1rem == 50px

因而能夠得出以下計算公式

放大後的1rem對應的px值53px ／ 正常計算的rem基準值50px  = 縮放倍率

縮放倍率 =  目標值1rem的px值50px ／ 修改以後的rem基準值

又因爲 正常計算的rem基準值 == 目標值1rem的px值

因此有 修改以後的rem基準值 = 正常計算的rem基準值 * 正常計算的rem基準值 ／ 放大後1rem的px值

到此爲實現的基本原理.

而實現到代碼層面就是

var d = document.createElement('div');
    d.style.cssText="width:1rem;height:0;overflow: hidden;position:absolute;z-index:-1;visibility: hidden;";
    document.body.appendChild(d);
var dw=d.offsetWidth; // 1rem的實際展現px值
    document.body.removeChild(d);
var html = document.querySelector('html');
var fz = html.style.fontSize || 0; //正常計算出來的rem基準值 , 可自行修改成rem計算好的值
var realRem = fz;
if(dw != fz){//不相等 則被縮放了
    realRem = Math.pow(fz , 2) / dw;
}
html.style.fontSize = realRem + 'px';

到此已經能夠計算出不被系統字號影響的rem值了 ；

可是！

這段代碼依賴於body的dom元素存在 ， 向其內部添加元素檢查縮放值；

而不少rem計算是在頭部head標籤內計算的 ， 這個時候頗有可能尚未body ， 那麼這樣代碼豈不是報錯了嗎？

因而我想到了一個本身很差解釋的方案 ， 把上面那段代碼 在head中執行的時候 ， 放在

setTimeout(function(){ } , 0)

因而問題就迎刃而解了 ， 頁面也沒有二次設置font-size改變rem引起的閃動現象；

歡迎各位大大有問題互相交流 ， 哪裏有寫的部隊的地方多多提寶貴意見 ， 感謝