当前位置: 首页 > Web前端 > CSS

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

时间:2023-03-31 11:08:41 CSS

REM如何忽略手机系统的字体大小调整?对于内嵌webview打开的h5页面,由于webview没有设置相应的处理,页面的font-size会受到系统字体大小的影响。font-size的改变完成后会影响页面rem的显示值,所以影响在一定程度上还是很严重的。比如今天提了一个相关的bugTnT是这样的,在软件内嵌的h5页面我写了一个element。根据特殊的rem计算方式,7rem值在各种手机上都可以正常显示,但是部分机型的安卓手机出现了变化,异常大。..检查后发现html中的font-size值是一个正常的值,但是却出现了令人难以置信的情况!页面html上的font-size以50px为例,在移动端内嵌h5中设置元素height:1rem;最终计算出的高度是53px。..整个人一头雾水,随即灵光一闪,原来是系统字体变大了。..系统如何处理这种字体大小的显示尚不清楚。..但是我想到了解决办法!(柯南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=缩放比例缩放比例=目标值1rempx值50px/修改后的rem参考值和由于正常计算的rem参考值==目标值1rem的px值,修改后的rem参考值=正常计算的rem参考值*正常计算的rem参考值/放大后1rem的px值是基本的实现原理。代码层面的实现是vard=document.createElement('div');d.style.cssText="width:1rem;height:0;overflow:hidden;position:absolute;z-index:-1;visibility:hidden;";document.body.appendChild(d);vardw=d.offsetWidth;//1rem的实际显示px值document.body.removeChild(d);varhtml=document.querySelector('html');varfz=html.style.fontSize||0;//正常计算的rem的基值可以修改为rem计算的值varrealRem=fz;if(dw!=fz){//ifnotequalScaledrealRem=Math.pow(fz,2)/dw;}html.style.fontSize=realRem+'px';现在可以计算出不受系统字体大小影响的rem值;但!这段代码依赖于body的dom元素的存在,向其添加元素以检查缩放值;许多rem计算都在head是在head标签中计算的,此时很可能没有body,那么这段代码不会报错吗?所以我想到了一个我无法解释的解决方案。上面代码在head执行的时候,放到setTimeout(function(){},0)中,问题解决,页面没有设置font-rem大小改变引起的闪烁现象;有问题欢迎互相交流,在有成文部队的地方给我们提宝贵意见,谢谢