近期用vue + vant 开发了一个公众号 用的是多页面
在开发是为了手机适配，自己计算了html的字体大小，用rem作为单位进行适配。
但是只要调整了手机系统的字体或者手机微信的字体，页面就出现位置错乱问题，解决步骤如下：
1.开发时页面少加入网页文档的属性
<meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
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 });
});
}
})()
