微信小程序中的H5网页在关怀模式下页面排版变乱的解决办法

在开发当中呢，经常会有很多H5的小活动页面，需要在微信的环境下使用。偶尔会出现H5页面在微信或者其他客户端中出现字体变大的问题，下面提供解决方法

首先先把网页自动放大放小的关掉。

<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

　　 安卓解决微信内置浏览器打开字体变大问题的方法：

<script>
       (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 });
               // 重写设置网页字体大小的事件
               WeixinJSBridge.on('menu:setfont', function() {
                   WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });
               });
           }
       })();
</script>

　　苹果IOS系统解决微信内置浏览器打开字体变大问题的方法：

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

　

参考来源：https://blog.csdn.net/weixin_63456913/article/details/128588384