移动端自适应但用户修改了手机的字体大小，导致项目中样式错乱

移动端本身做了自适应，但是用户的手机设置了字体大小，会改变项目中得样式测试提了一个自适应问题，所以找了一个方法让他不影响项目本身！

找了一个案例，https://blog.csdn.net/little_shallot/article/details/128626278

用在项目中使用还可以改成了vue 项目中

<template>
  <div id="app"></div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {};
  },
  methods: {
    changeHtmlFontSizeHandle() {
      // 页面开始加载时修改font-size
      var html = document.getElementsByTagName("html")[0];
      var oWidth =
        document.body.clientWidth || document.documentElement.clientWidth;
      if (oWidth >= 640) {
        html.style.fontSize = "59.26px";
      } else {
        html.style.fontSize = 59.26 * (oWidth / 640) + "px";
        // 1px =  0.0144rem  750设计图vscode设置1rem=69.44px
      } 
    },
     autoFontSize() {
      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", () => {
        WeixinJSBridge.invoke("setFontSizeCallback", {
          fontSize: 0,
        });
      });
    },
  },
  mounted() {
    this.changeHtmlFontSizeHandle();
    this.autoFontSize();
    window.addEventListener("resize", () => {
      this.changeHtmlFontSizeHandle();
      this.autoFontSize();
    }); 
  },
};
</script>

<style scoped>
html,
body {
  width: 100%;
  max-width: 640px;
  height: 100%;
  overflow: hidden;
  margin: auto;
  position: relative;
  /* IOS禁止微信调整字体大小 */
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;

}
</style>