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

今天经理说有个用户反映小程序页面很乱,可能是他设置了字体大小的原因,让我改一下。
有的年龄大的用户可能会调整微信的字体大小,所以为了用户体验。。。
在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>

猜你喜欢

转载自blog.csdn.net/weixin_44738158/article/details/129622563
今日推荐