移动端开启系统缩放和微信开启老年模式的两种样式_微信小程序切换老年版整理放大怎么做-CSDN博客

本文链接：https://blog.csdn.net/zsq199771/article/details/137037498

本文讲述了在开发过程中遇到的移动端系统放大和微信老年模式缩放问题，通过设置viewport元标签、CSS禁止文本缩放以及JavaScript处理微信内部的字号调整，提供了解决方案，特别提到对于复杂页面，可能需要考虑使用图片替代部分文字以减少改动。

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

文章目录

- 解决移动端开启系统放大和微信老年模式两种缩放问题的解决办法
原因：
- 技术细节
- 小结

解决移动端开启系统放大和微信老年模式两种缩放问题的解决办法

原因：

因为接了个某车企官网的项目，有个落地页要上线，第一次接手，客户那边可能要求比较完善，开始要兼容系统开启放大后的字体缩放问题，会影响整体感官

技术细节

` 提示：系统缩放解决办法：
首先：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />

其次css：

html,body {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -moz-text-size-adjust: none;
}

这时候已经禁用掉绝大多数的缩放问题了。

然后修好了后客户又开启了微信老年关怀模式的缩放，这个功能是微信框架之内的，不能通过css更改了。

在js添加如下代码：

 try {
    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
        })
      })
    }
  } catch(e) {
  
}