黄龙

2018-07-16 17:32

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

本文作者:IMWeb 黄龙 原文出处:IMWeb社区 未经同意,禁止转载

解决方法

    function calcREM() {
        var docEl = document.documentElement;
        var width = docEl.getBoundingClientRect().width;
        var rem = width / 7.5;
        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;
    }

最主要的就是通过window.getComputedStyle方法去获取刚刚设置的fontSize如果发现值不一样,那么系统字体就改了。去修正它就好了。至于为什么设置的值和获取的值不一样就不是很清楚了。

0条评论

    您需要 注册 一个IMWeb账号或者 才能进行评论。