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

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

推荐阅读更多精彩内容