微信设置字体大小导致小程序页面排版变形

最新推荐文章于 2024-09-09 15:01:35 发布

王巨饿

最新推荐文章于 2024-09-09 15:01:35 发布

阅读量970

点赞数 1

文章标签：微信小程序 javascript

本文链接：https://blog.csdn.net/weixin_44738158/article/details/129622563

版权

文章讲述了如何处理用户因调整微信字体大小导致的小程序页面显示混乱的问题。通过在Vue的index.html中添加特定的CSS和JavaScript代码，可以禁止用户自定义字体大小，以保证页面在不同设置下的布局一致性，尤其对于老年用户群体。

摘要由CSDN通过智能技术生成

今天经理说有个用户反映小程序页面很乱，可能是他设置了字体大小的原因，让我改一下。
有的年龄大的用户可能会调整微信的字体大小，所以为了用户体验。。。
在vue的index.html中写以下代码就可以啦啦啦。。。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>沪鸽会员</title>
    <style>
      /* 兼容IOS */
      body{
      /* 禁止用户自定义设置字体大小 */
      -webkit-text-size-adjust: 100% !important;
      text-size-adjust: 100% !important;
      -moz-text-size-adjust: 100% !important;
      /* 禁止用户自定义设置字体大小 */
    }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
  <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>
</html>

王巨饿

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
微信设置字体大小导致小程序页面排版变形

今天经理说有个用户反映小程序页面很乱，可能是他设置了字体大小的原因，让我改一下。有的年龄大的用户可能会调整微信的字体大小，所以为了用户体验。在vue的index.html中写以下代码就可以啦啦啦。
复制链接

扫一扫