最近在开发微信落地页的时候遇到了微信端设置字体大小会影响前端的界面布局,原因是移动端页面开发都是用rem作为单位的,所以就找了些相关的解决办法。
1.安卓手机禁止微信客户端修改字体大小
(function() {
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);
}
}
function handleFontSize() {
// 设置网页字体为默认大小
WeixinJSBridge.invoke('setFontSizeCallback', {
fontSize: 0 ,
fontFamily: '"微软雅黑","Microsoft YaHei",Tahoma,Arial,sans-serif'
}); // 重写设置网页字体大小的事件
WeixinJSBridge.on('menu:setfont', function() {
WeixinJSBridge.invoke('setFontSizeCallback', {
fontSize: 0,
fontFamily: '"微软雅黑","Microsoft YaHei",Tahoma,Arial,sans-serif'
});
});
}
})();
2.ios系统设置字体大小不受微信设置的字体大小影响
html {
-webkit-text-size-adjust: 100% !important;
text-size-adjust: 100% !important;
-moz-text-size-adjust: 100% !important;
}