微信调大字体h5适配

小白前进之路

已于 2024-07-22 16:02:08 修改

阅读量86

点赞数 3

文章标签：微信

于 2024-07-02 14:37:27 首次发布

本文链接：https://blog.csdn.net/qq_46595660/article/details/140126363

版权

1.iOS

body
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  -moz-text-size-adjust: 100% !important;

2.安卓

export default {
  methods: {
    normalFontSize() {
      /* eslint-disable */
      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 });
        setTimeout(() => {
          this.showLoading = false;
        }, 200);
      });
    },
    isWeixin() {
      const ua = navigator.userAgent.toLowerCase();
      if(ua.match(/MicroMessenger/i)=="micromessenger") {
        return true;
      } else {
        return false;
      }
    }
  },
  data() {
    return  {
      isIOS,
      showLoading: this.isWeixin() && !isIOS() ? true : false,
    }
  },
  mounted() {
    this.normalFontSize();
  },
}

安卓微信调大字体h5适配，字体恢复需要几秒的延迟，需要采用loading
微信，钉钉调大字体，并不会修改h5的字体，只有微信修改，会使h5字体变大。