成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

REM如何無視手機系統(tǒng)字號調(diào)整

Towers / 3107人閱讀

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

此問題屬于REM的優(yōu)化 解決如下問題

在移動端rem布局中 ， 多數(shù)環(huán)境多數(shù)瀏覽器下rem的計算妥妥的沒有問題 ， 但是部分環(huán)境 ， 比如某些軟件內(nèi)嵌的webview中打開的h5頁面 ， 由于webview沒有設(shè)置相應(yīng)處理 ， 導(dǎo)致頁面的font-size會收到系統(tǒng)字號大小的影響。

font-size的改變完成會影響頁面的rem的展現(xiàn)值 ， 所以影響在某種程度上來說還是很嚴(yán)重的，

比如今天就被提了個相關(guān)的bug TnT

情況是這樣 ， 在軟件內(nèi)嵌的h5頁面寫了一個元素 ， 根據(jù)特殊的rem計算方式 ， 7rem值完全可以展示在各個手機下正常展示 ， 但是某些機型的安卓手機 ， 就發(fā)生了變易 ， 異常的大。。。

經(jīng)檢查發(fā)現(xiàn) ， html中的font-size值是正常值 ，但是出現(xiàn)了一個匪夷所思的情況！

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

整個人就蒙圈了 ， 然后突然靈光一閃 ， 發(fā)現(xiàn)是系統(tǒng)的字號調(diào)大了。。。

系統(tǒng)如何處理的這個font-size展示還沒有搞清楚。。。但是我想到了一個解決辦法！

（柯南bgm。。。）

頁面中html上font-size的值是rem的計算基本單位 ， 那么1rem對應(yīng)的px值就應(yīng)該等于html的font-size的值；

但是當(dāng)系統(tǒng)字體放大或縮小后 ， rem基準(zhǔn)值50px沒有變化 ， 但是展示值1rem卻等于53px ， 說明系統(tǒng)將此rem值按某種倍率放大了， 那么我們的最終目的就是讓頁面保持1rem == 50px就對了

那么我們的目的就是要修改html的基準(zhǔn)值算出如何讓1rem == 50px

于是可以得出如下計算公式

放大后的1rem對應(yīng)的px值53px ／ 正常計算的rem基準(zhǔn)值50px  = 縮放倍率

縮放倍率 =  目標(biāo)值1rem的px值50px ／ 修改之后的rem基準(zhǔn)值

又由于 正常計算的rem基準(zhǔn)值 == 目標(biāo)值1rem的px值

所以有 修改之后的rem基準(zhǔn)值 = 正常計算的rem基準(zhǔn)值 * 正常計算的rem基準(zhǔn)值 ／ 放大后1rem的px值

到此為實現(xiàn)的基本原理.

而實現(xiàn)到代碼層面就是

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基準(zhǔn)值 , 可自行修改為rem計算好的值
var realRem = fz;
if(dw != fz){//不相等 則被縮放了
    realRem = Math.pow(fz , 2) / dw;
}
html.style.fontSize = realRem + "px";

到此已經(jīng)可以計算出不被系統(tǒng)字號影響的rem值了 ；

但是！

這段代碼依賴于body的dom元素存在 ， 向其內(nèi)部添加元素檢查縮放值；

而很多rem計算是在頭部head標(biāo)簽內(nèi)計算的 ， 這個時候很有可能還沒有body ， 那么這樣代碼豈不是報錯了嗎？

于是我想到了一個自己不好解釋的方案 ， 把上面那段代碼 在head中執(zhí)行的時候 ， 放在

setTimeout(function(){ } , 0)

于是問題就迎刃而解了 ， 頁面也沒有二次設(shè)置font-size改變rem引發(fā)的閃動現(xiàn)象；

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90306.html

相關(guān)文章

  • REM如何無視手機系統(tǒng)字號調(diào)整

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

    王笑朝 評論0 收藏0

  • REM如何無視手機系統(tǒng)字號調(diào)整

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

    codergarden 評論0 收藏0

  • 如何更愉快地使用em —— 別說你懂CSS相對單位

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

    gekylin 評論0 收藏0

  • 如何更愉快地使用rem —— 別說你懂CSS相對單位

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

    Snailclimb 評論0 收藏0

發(fā)表評論

0條評論

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