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

发布时间 2023-09-13 15:22:41作者: 艾前端

关于微信安卓端网页字体适配的通知 微信安卓版 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完全指南