微信H5适配解决微信调整字体大小导致Html5页面混乱

最新推荐文章于 2023-10-12 15:35:58 发布

原创

最新推荐文章于 2023-10-12 15:35:58 发布 · 5.1k 阅读

17 ·

CC 4.0 BY-SA版权

该博客介绍了如何解决微信公众号中页面因用户调整字体大小导致的显示问题。对于iOS设备，可以通过添加特定的CSS属性来防止字体调整；而对于Android设备，可以使用JavaScript与微信JSBridge交互，设置并监听字体大小的改变，从而保持页面的正常布局。通过这些方法，开发者可以确保其页面在不同设备上保持一致的视觉效果。

最近开发公众号遇到一个问题：

iOS、Android 加载页面，如果用户调整了微信自带的字体大小，那么我们的页面就会跟随调整字体大小，导致页面错乱无法适配。所以希望能够禁止微信的字体放大功能。

找了一些方法总结如下：

原理：阻止ios和安卓调整字体大小时候的事件，ios通过添加css属性，安卓通过微信属性去阻止。

iOS系统禁止微信客户端修改字体大小：

/* iOS禁止微信调整字体大小 */
body {
   
   
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
}