vue H5页面在微信中打开,调节字体大小,页面样式错乱

在vue H5项目中,在微信中打开,由于微信自带的调整字体 大小功能, 如果把字体调大, 页面样式就会出现偏差或错乱

解决方法: 在App.vue 中

IOS: 添加样式

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

安卓: js

<script>
  //解决android下显示的问题 同样 在app.vue 中也写下面这行自运行函数 写入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>

本文参考于:https://blog.csdn.net/qq_37732761/article/details/114693609

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容