移动端修改系统字体导致rem布局混乱的解决方法

最新推荐文章于 2023-03-03 18:27:08 发布

bellemere

最新推荐文章于 2023-03-03 18:27:08 发布

阅读量1.1k

点赞数

文章标签： rem javascript

本文链接：https://blog.csdn.net/bellemere/article/details/87894886

版权

移动端的网页如果用rem做自适应布局，可能出现修改系统字体后布局紊乱的情况。因为系统字体修改是全局的，webview也可能受到影响。

解决方法是设置rem后，取实际字体值，与我们预设的rem值进行对比，在此基础上再做一次“缩放”。

var num = 20;
var docEl = document.documentElement;
var width = docEl.getBoundingClientRect().width;
var rem = width / num;
rem = parseFloat(rem.toFixed(3));
docEl.style.fontSize = rem + 'px';

var realitySize = parseFloat(window.getComputedStyle(document.documentElement).fontSize);
if (rem !== realitySize) {
  rem = rem * rem / realitySize;
  docEl.style.fontSize = rem + 'px';
}

window.REM = rem;