微信客户端设置字体大小后，微信浏览器字体也改变，导致微信浏览器排版错误

最近工作时候发现，移动端浏览器页面与微信浏览器不一样，微信浏览器明显变形了

我们是通过js观测屏幕宽度，来设置html的字体大小，以iphone6位基准模板通过postcss-pxtorem这个插件把px转化成rem，这样我们写项目的时候就可以用px，然后通过插件转rem实现自适应

        // 基准大小
        const baseSize = 32;
        // 设置 rem 函数
        function setRem() {
            // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
            const scale = document.documentElement.clientWidth / 750;
            // 设置页面根节点字体大小
            document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
        }

        // 初始化
        setRem()
        // 改变窗口大小时重新设置 rem
        window.onresize = function () {
            setRem()
        }

但是为啥会变形呢？

经过研究发现，微信安卓版 7.0.10 版本起，网页的字体会跟随微信设置里的字体大小更改而变化。

下面是原链接

https://developers.weixin.qq.com/community/develop/doc/000a26b86948f8743cb9a6da951409

 

微信也给出了方法，然后我把项目里如何结局给贴出来

我在App.vue也就是根的父组件中的mounted方法中设置微信字体

function handleFontSize() {
　　// 设置网页字体为默认大小
　　WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 2 });
　　// 重写设置网页字体大小的事件
　　WeixinJSBridge.on('menu:setfont', function() {
　　　　WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 2 });
　　});
}        
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
　　handleFontSize();
}

 

后来发现进行路由跳转的时候，字体会重新改变，我又在路由钩子里也改变了微信字体

　import Router from 'vue-router'

router.afterEach((to, from) => {
    function handleFontSize() {
        // 设置网页字体为默认大小
        WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 2 });
        // 重写设置网页字体大小的事件
        WeixinJSBridge.on('menu:setfont', function() {
            WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 2 });
        });
    }        
    if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
        handleFontSize();
    }
})

 

这样微信浏览器的问题就解决了