国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Towers / 3101人閱讀

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

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

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

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

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

相關文章

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

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

    codergarden 評論0 收藏0
  • REM如何無視手機系統字號調整

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

    王笑朝 評論0 收藏0
  • 如何更愉快地使用em —— 別說你懂CSS相對單位

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

    gekylin 評論0 收藏0
  • 如何更愉快地使用rem —— 別說你懂CSS相對單位

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

    Snailclimb 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<