Resuelva el problema de que el diseño rem de las páginas h5 en los navegadores integrados de algunos dispositivos Android se ve afectado por las fuentes reales del dispositivo

fondo

Recientemente, hubo un proyecto h5 porque la máquina real (algunos teléfonos Android) aumentó el tamaño de fuente, lo que provocó un error en el diseño de la página h5.

razón

Afecta el tamaño de fuente en la vista web html incorporada (el tamaño establecido no es consistente con el tamaño real mostrado). Por ejemplo, si amplía la fuente predeterminada de la máquina real y aumenta el tamaño de fuente html, el tamaño de fuente real El tamaño también será mayor.

resolver

1. Calcule la relación de ampliación o reducción en el entorno real de la máquina
2. Luego ajuste el valor real establecido y restablezca el tamaño de fuente del HTML

白话 说的 就是  假设 你设置的 rem 为40px 而实际上 真机展示的是 50px 
这时候 你想要在真机上显示 40px 你就得 设置 40*（40/50）px = 32px 
这样 真机就会放大显示为 40px  问题就得到解决了

código

Tome la solución de adaptación flexible.js más común en el proyecto.

 function refreshRem(){
    
    
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
    
    
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
        // 上面是源码
        
        // 下面是新加的


       // 通过getComputedStyle 获取浏览器 计算后的html font-size 真实大小
        let real_rem = ~~(window.getComputedStyle(docEl).fontSize.replace('px',''))
        
        // 再进行比较 不一致 则进行重新赋值 以达到不受真机字体大小 影响的效果
        if(rem !== real_rem) {
    
    
            docEl.style.fontSize = rem*(rem/real_rem) + 'px';
        }
        

    }