h5 网页字体避免微信字体设置影响的解决办法

645 阅读1分钟

ios:

body {
    -webkit-text-size-adjust: 100% !important; // 修复由于微信app字体变化而导致页面错乱-ios
}

安卓:

<script>
    // 修复由于微信app字体变化而导致页面错乱--安卓
    (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', () => {
          WeixinJSBridge.invoke('setFontSizeCallback', {
            'fontSize': 0
          });
        });
      }
    })();
  </script>