微信调整字体大小导致h5排版错乱问题解决方案

把下面代码放到合适位置,列如app.vue即可

iOS:

1
2
3
4
5
body {
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}

Android:

1
2
3
4
5
6
7
8
9
10
11
12
13
function handleFontSize() {
// 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 })
// 重写设置网页字体大小的事件
WeixinJSBridge.on('menu:setfont', function() {
WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 })
})
}
if (typeof WeixinJSBridge === "object" && typeof WeixinJSBridge.invoke === "function") {
handleFontSize()
} else {
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false)
}