微信具有调整字体大小的功能,然而有时候调整字体大小会导致微信公众号内的H5页面样式混乱。
解决原理:阻止ios和安卓调整字体大小时候的事件。ios通过添加css属性,安卓通过微信属性去阻止。
注:添加后无法通过外部更改字体大小,根据项目需求运用。
ios系统:
body{ -webkit-text-size-adjust: 100% !important; }
安卓系统:
(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 }); }); } })();
注:安卓使用了微信的JS桥。