如果用户手机字体调整太大或者太小会影响到页面布局;

这时需要禁止用户调整字体大小,自适应;

app.vue

<script>
import { isIos, isAndroid } from "@/utils/appUtils.js";

export default {
  name: "App",
  data() {
    return {
    };
  },
  created() {
    // 苹果系统 键盘全局处理
    if (this.isIOS) {
      let flag = false;
      let pageBackNormFunc;
      document.body.addEventListener("focusin", () => {
        flag = true;
        pageBackNormFunc && clearTimeout(pageBackNormFunc);
      });
      document.body.addEventListener("focusout", () => {
        if (flag) {
          pageBackNormFunc = setTimeout(() => {
            window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
          }, 200);
        }
        flag = false;
      });
    } else {
      // 安卓锁定页面字体大小,不随系统调整而调整
      this.lockFontForAndroid();
    }
  },
  methods: {
    // 安卓锁定页面字体大小,不随系统调整而调整
    lockFontForAndroid() {
      if (isAndroid) {
        if (
          typeof WeixinJSBridge == "object" &&
          typeof WeixinJSBridge.invoke == "function"
        ) {
          this.handleFontSize();
        } else {
          if (document.addEventListener) {
            document.addEventListener(
              "WeixinJSBridgeReady",
              this.handleFontSize,
              false
            );
          } else if (document.attachEvent) {
            document.attachEvent("WeixinJSBridgeReady", this.handleFontSize);
            document.attachEvent("onWeixinJSBridgeReady", this.handleFontSize);
          }
        }
      }
    },
    // 同上
    handleFontSize() {
      WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
      WeixinJSBridge.on("menu:setfont", function () {
        WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
      });
    },
  },
};
</script>

index.html

<!-- wx font -->
<script rel="preload" type="text/javascript">
  (function () {
    if (
      typeof WeixinJSBridge == "object" &&
      typeof WeixinJSBridge.invoke == "function"
    ) {
      handleFontSize();
    } else {
      document.addEventListener(
        "WeixinJSBridgeReady",
        handleFontSize,
        false
      );
    }
    
    function handleFontSize() {
      WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
      WeixinJSBridge.on("menu:setfont", function () {
        WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
      });
    }
  })();
</script>
文章目录