在vue H5项目中,在微信中打开,由于微信自带的调整字体 大小功能, 如果把字体调大, 页面样式就会出现偏差或错乱
解决方法:
在App.vue 中
IOS: 添加样式
body {
-webkit-text-size-adjust: 100% !important;
}
安卓: js
<script>
//解决android下显示的问题 同样 在app.vue 中也写下面这行自运行函数 写入script 里面即可
(function () {
if (
typeof WeixinJSBridge == "object" &&
typeof WeixinJSBridge.invoke == "function"
) {
handleFontSize();
} else {
if (document.addEventListener) {
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", handleFontSize);
document.attachEvent("onWeixinJSBridgeReady", handleFontSize);
}
}
function handleFontSize() {
// 设置网页字体为默认大小
WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
// 重写设置网页字体大小的事件
WeixinJSBridge.on("menu:setfont", function () {
WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
});
}
})()
</script>
本文参考于:https://blog.csdn.net/qq_37732761/article/details/114693609