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

该博客介绍了如何解决微信公众号中页面因用户调整字体大小导致的显示问题。对于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;
}

Android 则通过js 调整:

<script>
// 强制禁
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值