微信公众号页面适配

近期用vue + vant 开发了一个公众号  用的是多页面

在开发是为了手机适配，自己计算了html的字体大小，用rem作为单位进行适配。

但是只要调整了手机系统的字体或者手机微信的字体，页面就出现位置错乱问题，解决步骤如下：

1.开发时页面少加入网页文档的属性

2.IOS解决方案：

body {

-webkit-text-size-adjust:100%!important;

    text-size-adjust:100%!important;

    -moz-text-size-adjust:100%!important;

}

3.安卓解决方案：

通过 WeixinJSBridge 设置网页字体为默认大小，并禁止用户自定义缩放页面

(function() {

    if (typeof WeixinJSBridge =="object" &&typeof WeixinJSBridge.invoke =="function") {

        handleFontSize();

    }else {

        if (document.addEventListener) {

            document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);

        }else if (document.attachEvent) {

            //IE浏览器，非W3C规范

            document.attachEvent("onWeixinJSBridgeReady", handleFontSize);

        }

    }

    function handleFontSize() {

        // 设置网页字体为默认大小

        WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize' :0 });

        // 重写设置网页字体大小的事件

        WeixinJSBridge.on('menu:setfont', function() {

            WeixinJSBridge.invoke('setFontSizeCallback', {'fontSize' :0 });

        });

    }

})()