微信 H5 页面兼容性——适配用户修改微信客户端字体大小

合集 - 微信 H5 兼容性(4)

1.微信 H5 页面兼容性——复制到剪贴板2023-07-312.微信 H5 页面兼容性——转发给朋友2023-08-113.微信 H5 页面兼容性——卸载页面时可靠的发送 HTTP 请求2023-08-28

4.微信 H5 页面兼容性——适配用户修改微信客户端字体大小2023-09-13

收起

关于微信安卓端网页字体适配的通知 微信安卓版 7.0.10 版本起，网页的字体会跟随微信设置里的字体大小更改而变化。

当用户修改微信客户端字体大小后，微信公众号网页的适配就会变得非常繁琐，Android 系统设备有 8 级字体大小，IOS 系统设备有 7 级字体大小，尤其将字体放大到最大一级后，页面会出现布局错乱的问题。

我通过将 Android 系统设备微信的字体设置到最大后，查看了小米购物车页面：

左侧是小米商城购物车页面-标准字体，右侧是超大字体。字体变大后页面显示错乱了。

并非没有做适配，字体太大，页面适配会变得非常繁琐，尤其当页面元素过多时。

---

微信 H5 作为在手机上打开的网页，可以设置最大宽度，并且在大屏幕上（微信桌面端打开公众号网页）显示在屏幕中间，具体可以参考微信的公众号文章页面的宽度：677px。并限制微信字体修改对网页的影响。

微信公众平台提供了 WeixinJSBridge，它是一个用于微信网页开发的 JavaScript 接口库。它能够让网页获得一些跟微信原生的 API 交互的能力，如调用微信客户端的 API。使用 WeixinJSBridge 可以为网页开发带来更多的功能和交互性，让用户体验更加流畅。

可以通过 WeixinJSBridge 来实现限制微信字体修改对网页的影响。只需将字体大小等级设置为 2 （标准）即可：

(function () {        
  if (typeof WeixinJSBridge === 'object' && typeof WeixinJSBridge.invoke === 'function') {
    // 在微信环境下（微信客户端，微信桌面端，微信开发者工具）
    onSetFontSize();
  } else {
    // 没在微信环境下
    // 在 WeixinJSBridge 加载完成后再调用相关的 API，监听 WeixinJSBridgeReady 事件
    document.addEventListener('WeixinJSBridgeReady', onSetFontSize, false);
  }
  function onSetFontSize() {
    // 设置网页字体为默认大小
    WeixinJSBridge.invoke('setFontSizeCallback', { fontSize: '2' });
  }
})();

---

针对 IOS 系统设备，需要调整样式：

因为缩放适配小屏幕而导致文字会变得很小，许多手机浏览器会使用文本溢出算法放大文本，改善可读性。当一个包含文本的元素使用了 100% 的屏幕宽度，该算法会增加文本大小，但是不会修改布局。text-size-adjust 这个属性允许开发者去除或者修改浏览器的这种行为，比如，当网页已经适配了小屏幕之后，就不需要这么做了。需要为想要实现的浏览器加上前缀。

html {
-webkit-text-size-adjust: 100% !important;
     -moz-text-size-adjust: 100% !important;
          text-size-adjust: 100% !important;
}

参考网址：

text-size-adjust
关于微信安卓端网页字体适配的通知
WeixinJSBridge完全指南