Android调整系统字体导致采用REM布局错乱的解决方法

最新推荐文章于 2024-06-14 16:55:11 发布

MunjungNa

最新推荐文章于 2024-06-14 16:55:11 发布

阅读量654

点赞数

文章标签： web vue

原文链接：https://imweb.io/topic/5b4c661145a23e4f03775a1d

版权

这篇博客介绍了在移动端Web开发中，如何处理安卓系统字体大小调整对HTML页面布局的影响。通过使用rem布局，并在Vue项目中实现一个名为calcREM的函数，动态计算并设置根元素的字体大小，以确保页面在系统字体变化时仍能保持正确布局。该方法包括比较预设的rem值和实际系统字体大小，若不一致则进行二次缩放。这是一个经过实践验证的有效解决方案。

摘要由CSDN通过智能技术生成

移动端web开发，采用rem布局写的html页面，对于安卓系统来说，如果系统字体调成很大，会影响html页面的布局，导致页面被扩大或混乱，解决方法是把自行定义的rem值和获取到的系统的字体大小进行比对，如果不一致，再进行二次缩放，

vue项目的话，以下方法放在methods里面，然后在created里面进行调用一次就行了；

当然以下方法也是网络上参考；

亲测可用；

  function calcREM() {
        var docEl = document.documentElement;
        var width = docEl.getBoundingClientRect().width;
        var rem = width / 10;//这个10，请根据自己项目进行修改，10rem等于占宽100%
        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;
    }