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