开发过程中发现一个问题,当用户的将微信的字体调大之后,会导致页面的字号变大,从而导致页面发生错乱,解决方案如下
ios环境
//需要在css里面添加
body{
-webkit-text-size-adjust: 100% !important;
}
安卓环境
//使用了微信内置的JSBridge
(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 });
});
}
})();
两种方案的解决原理为
ios通过添加css3的属性,安卓通过微信属性去阻止调整字体大小时候的事件。