在做vue h5 时因改变手机字体导致页面布局错乱比如在微信公众号中放入h5 客户把手机字体或者微信字体调大导致页面错乱

你不努力，是等什么嘛

已于 2025-05-19 16:49:54 修改

阅读量1.6k

点赞数

文章标签： vue.js 智能手机微信

于 2021-03-12 13:36:39 首次发布

本文链接：https://blog.youkuaiyun.com/qq_37732761/article/details/114693609

版权

认定了就要好好的珍惜对待，人生不容辜负，你必须要更加努力。加油骚年
**

正文：

**
在做vue h5 时因改变手机字体导致页面布局错乱比如在微信公众号中放入h5 客户把手机字体或者微信字体调大导致页面错乱

在这里插入图片描述
这是微信调字体会导致页面错乱这里介绍解决ios 和 android 这个问题的方法


//IOS下 在app.vue中的 样式下写入这行代码 可解决ios 显示问题  记住一定不要加 scoped
body {
  -webkit-text-size-adjust: 100% !important;
}


//解决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 });
    });
  }
})();