移动端禁止WX用户字体调整
如果用户手机字体调整太大或者太小会影响到页面布局;
这时需要禁止用户调整字体大小,自适应;
app.vue
<script>
import { isIos, isAndroid } from "@/utils/appUtils.js";
export default {
name: "App",
data() {
return {
};
},
created() {
// 苹果系统 键盘全局处理
if (this.isIOS) {
let flag = false;
let pageBackNormFunc;
document.body.addEventListener("focusin", () => {
flag = true;
pageBackNormFunc && clearTimeout(pageBackNormFunc);
});
document.body.addEventListener("focusout", () => {
if (flag) {
pageBackNormFunc = setTimeout(() => {
window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
}, 200);
}
flag = false;
});
} else {
// 安卓锁定页面字体大小,不随系统调整而调整
this.lockFontForAndroid();
}
},
methods: {
// 安卓锁定页面字体大小,不随系统调整而调整
lockFontForAndroid() {
if (isAndroid) {
if (
typeof WeixinJSBridge == "object" &&
typeof WeixinJSBridge.invoke == "function"
) {
this.handleFontSize();
} else {
if (document.addEventListener) {
document.addEventListener(
"WeixinJSBridgeReady",
this.handleFontSize,
false
);
} else if (document.attachEvent) {
document.attachEvent("WeixinJSBridgeReady", this.handleFontSize);
document.attachEvent("onWeixinJSBridgeReady", this.handleFontSize);
}
}
}
},
// 同上
handleFontSize() {
WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
WeixinJSBridge.on("menu:setfont", function () {
WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
});
},
},
};
</script>
index.html
<!-- wx font -->
<script rel="preload" type="text/javascript">
(function () {
if (
typeof WeixinJSBridge == "object" &&
typeof WeixinJSBridge.invoke == "function"
) {
handleFontSize();
} else {
document.addEventListener(
"WeixinJSBridgeReady",
handleFontSize,
false
);
}
function handleFontSize() {
WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
WeixinJSBridge.on("menu:setfont", function () {
WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
});
}
})();
</script>
文章目录
本作品采用 知识共享署名-相同方式共享 4.0 国际许可协议 进行许可。