前端禁用微信浏览器字体调整,用户设置了系统字体大小,导致微信内嵌h5页面字体大小改变
前端按设计稿开发,但是用户得手机调整了文字字体的大小,使得默认字体改的很大,我们APP端都对此进行了限制。但是安卓微信小程序默认没有限制。对h5页面布局产生了影响。
android下
App.vue
<script>
export default {
name: 'App',
mounted() {
const handleFontSize = () => {
// 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', {fontSize: 0});
// 重写设置网页字体大小的事件
WeixinJSBridge.on('menu:setfont', function() {
WeixinJSBridge.invoke('setFontSizeCallback', {fontSize: 0});
});
};
try {
// 安卓 禁止用户自定义设置字体大小
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);
}
}
} catch (error) {}
}
};
</script>
ios下
<style lang="less">
body {
/* IOS 禁止用户自定义设置字体大小 */
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}
</style>