禁止微信内置浏览器调整字体大小影响前端界面布局

最新推荐文章于 2023-12-05 16:41:42 发布

原创最新推荐文章于 2023-12-05 16:41:42 发布 · 751 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css

实战总结专栏收录该内容

17 篇文章

订阅专栏

本文介绍了如何在微信环境中防止用户调整字体大小对页面布局的影响。对于安卓设备，通过调用微信JSBridge API来锁定字体大小；对于iOS设备，则使用CSS属性-webkit-text-size-adjust进行控制。

   最近在开发微信落地页的时候遇到了微信端设置字体大小会影响前端的界面布局，原因是移动端页面开发都是用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;
}