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

資訊專欄INFORMATION COLUMN

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

codergarden / 445人閱讀

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

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

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

font-size的改變完成會(huì)影響頁(yè)面的rem的展現(xiàn)值 ， 所以影響在某種程度上來(lái)說(shuō)還是很?chē)?yán)重的，

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

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

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

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

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

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

（柯南bgm。。。）

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

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

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

于是可以得出如下計(jì)算公式

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

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

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

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

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

而實(shí)現(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的實(shí)際展示px值
    document.body.removeChild(d);
var html = document.querySelector("html");
var fz = html.style.fontSize || 0; //正常計(jì)算出來(lái)的rem基準(zhǔn)值 , 可自行修改為rem計(jì)算好的值
var realRem = fz;
if(dw != fz){//不相等 則被縮放了
    realRem = Math.pow(fz , 2) / dw;
}
html.style.fontSize = realRem + "px";

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

但是！

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

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

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

setTimeout(function(){ } , 0)

于是問(wèn)題就迎刃而解了 ， 頁(yè)面也沒(méi)有二次設(shè)置font-size改變r(jià)em引發(fā)的閃動(dòng)現(xiàn)象；

歡迎各位大大有問(wèn)題互相交流 ， 哪里有寫(xiě)的部隊(duì)的地方多多提寶貴意見(jiàn) ， 感謝

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

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

相關(guān)文章

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

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

    王笑朝 評(píng)論0 收藏0

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

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

    Towers 評(píng)論0 收藏0

  • 如何更愉快地使用em —— 別說(shuō)你懂CSS相對(duì)單位

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

    gekylin 評(píng)論0 收藏0

  • 如何更愉快地使用rem —— 別說(shuō)你懂CSS相對(duì)單位

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

    Snailclimb 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<