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

王笑朝發布于2019-08-02 15:59 / 444人閱讀

摘要：經檢查發現，中的值是正常值，但是出現了一個匪夷所思的情況頁面上的以為例，在移動端內嵌中設置元素最終出來的高度竟然是。。。整個人就蒙圈了，然后突然靈光一閃，發現是系統的字號調大了。。。系統如何處理的這個展示還沒有搞清楚。。。

此問題屬于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引發的閃動現象；

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

GPU云服務器云服務器手機存儲調整手機端軟件如何訪問云服務器系統如何調整帶寬 linux系統硬盤大小調整

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/54465.html

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

摘要：經檢查發現，中的值是正常值，但是出現了一個匪夷所思的情況頁面上的以為例，在移動端內嵌中設置元素最終出來的高度竟然是。。。整個人就蒙圈了，然后突然靈光一閃，發現是系統的字號調大了。。。系統如何處理的這個展示還沒有搞清楚。。。此問題屬于REM的優化解決如下問題在移動端rem布局中，多數環境多數瀏覽器下rem的計算妥妥的沒有問題，但是部分環境，比如某些軟件內嵌的webvie...

codergarden 2019-08-29 13:59 評論0 收藏0
REM如何無視手機系統字號調整

摘要：經檢查發現，中的值是正常值，但是出現了一個匪夷所思的情況頁面上的以為例，在移動端內嵌中設置元素最終出來的高度竟然是。。。整個人就蒙圈了，然后突然靈光一閃，發現是系統的字號調大了。。。系統如何處理的這個展示還沒有搞清楚。。。此問題屬于REM的優化解決如下問題在移動端rem布局中，多數環境多數瀏覽器下rem的計算妥妥的沒有問題，但是部分環境，比如某些軟件內嵌的webvie...

Towers 2019-08-21 17:59 評論0 收藏0
如何更愉快地使用em —— 別說你懂CSS相對單位

摘要：相對單位的值會根據外部影響因素的變化而變化。很自然，相對單位使用起來會比較困難。在本章中，我將揭開相對單位的神秘面紗。重點來了，使用相對單位聲明的值會由瀏覽器轉化為一個絕對值，我們稱之為計算值。 showImg(https://segmentfault.com/img/bVbdtsA); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其中的第二章《W...

gekylin 2019-08-30 15:54 評論0 收藏0
如何更愉快地使用rem —— 別說你懂CSS相對單位

摘要：值得注意的是，這個設置對使用或其他絕對單位定義的字號大小無效。事實上，提供了一個在和間的相對單位折中解決方案，而且更易于使用。圖使用相對單位和繼承字號的面板下面是模板，加到你的頁面吧。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段時間試譯了Keith J.Grant的CSS好書《CSS in Depth》，其...

Snailclimb 2019-08-30 15:54 評論0 收藏0