REM如何无视手机系统字号调整

Towers 发布于2019-08-21 17:59 / 3100人阅读

摘要：经检查发现，中的值是正常值，但是出现了一个匪夷所思的情况页面上的以为例，在移动端内嵌中设置元素最终出来的高度竟然是。。。整个人就蒙圈了，然后突然灵光一闪，发现是系统的字号调大了。。。系统如何处理的这个展示还没有搞清楚。。。

此问题属于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系统硬盘大小调整

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90306.html

REM如何无视手机系统字号调整

摘要：经检查发现，中的值是正常值，但是出现了一个匪夷所思的情况页面上的以为例，在移动端内嵌中设置元素最终出来的高度竟然是。。。整个人就蒙圈了，然后突然灵光一闪，发现是系统的字号调大了。。。系统如何处理的这个展示还没有搞清楚。。。此问题属于REM的优化解决如下问题在移动端rem布局中，多数环境多数浏览器下rem的计算妥妥的没有问题，但是部分环境，比如某些软件内嵌的webvie...

codergarden 2019-08-29 13:59 评论0 收藏0
REM如何无视手机系统字号调整

摘要：经检查发现，中的值是正常值，但是出现了一个匪夷所思的情况页面上的以为例，在移动端内嵌中设置元素最终出来的高度竟然是。。。整个人就蒙圈了，然后突然灵光一闪，发现是系统的字号调大了。。。系统如何处理的这个展示还没有搞清楚。。。此问题属于REM的优化解决如下问题在移动端rem布局中，多数环境多数浏览器下rem的计算妥妥的没有问题，但是部分环境，比如某些软件内嵌的webvie...

王笑朝 2019-08-02 15: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