[极致用户体验] 微信设置大字号后，iOS加载网页时闪动怎么办？

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。

背景

之前的文章，我提到网页开发的一个常见问题：《在微信大字号模式下，网页样式乱了怎么办？》。上文中提供了一种解决方案，在用户调整微信字体大小后，可以保证网页字体大小不变，解决了样式错乱的问题。

但是上面的解决方案，背离了微信「关怀模式」和「大字号模式」的初衷。所以我又写了一篇文章：《让你的网页，适配微信大字号模式！体验超好，快来收藏》，介绍了几种方案，助你网页适配微信的大字号。

但是在iOS操作系统下（iPhone或iPad），仍然有个问题。如果用户之前设置了网页的大字号，进入任意网页时，就有个明显的闪动：

但是在安卓，没有这个问题，会直接以大字号展示。

分析原因

这与微信大字号的实现方式有关。而实现方式又与机型有关。包括以下3种：

安卓

在安卓，网页不会闪动，是因为安卓使用setTextZoom设置字体比例。早在html加载前，就已经设置好了，它也无需修改dom。

后续用户修改网页字号时，只需要安卓调用setTextZoom即可（这是微信客户端实现的，我们Web开发者无需关注）。

iPhone

iPhone闪动，是因为它必须等到html加载完，渲染页面的JS也执行完，再给body标签添加text-size-adjust这个CSS样式（它需要修改dom）。

后续用户修改网页字号时，只需修改body的text-size-adjust这个CSS样式即可（这是微信客户端实现的，我们Web开发者无需关注）。

解决思路

如果我们能知道用户设置的缩放比例，在我们的JS主动给body标签添加text-size-adjust)这个CSS样式（在渲染之前就添加），那么闪动的问题就解决了。

iPad

我今天研究了一下，发现微信iPad大字号和iPhone大字号，实现方式居然不一样！

iPad闪动，是因为它必须等到html加载完，渲染页面的JS也执行完，再给所有包含Text文本的标签添加style属性，里面直接指定了计算后的font-size。当然，网页元素的原始字号大小保存在了元素的属性mp-original-font-size里。

动态赋值后，你的DOM结构会变成这样：

后续用户修改字体时，会根据mp-original-font-size和放大比例，重新计算所有元素的font-size，并动态设置所有元素的style中的font-size。

可能有朋友要问了：一次性设置这么多style属性，这不会很卡吗？

没错，是很卡，在安卓、iPhone、iPad上设置大字号，就iPad最卡！

解决思路

如果我们能知道用户设置的缩放比例，在我们的JS主动给所有的包含Text的元素添加font-size这个CSS样式（在渲染之前就添加），那么闪动的问题就解决了。

开发代码，解决问题

我通过神秘方式，获取了一串神秘代码：JSON.parse(window.__wxWebEnv.getEnv()).fontScale，在微信内置浏览器中，执行这个方法，是可以获得用户设置的缩放大小的。当然，你必须先引用「微信JS SDK」，才能用这个代码，否则会报错，建议结合try catch使用它。

需要在html文件head引入：

<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js">script>

下面针对iPhone和iPad这2种机型，分别给出解决方案。

iPhone

思路介绍：给body设置一个-webkit-text-size-adjust样式，按照字号缩放比例设置即可。

const initIPhoneFontSize = () => {
   
  try {
   
    document.body.style.webkitTextSizeAdjust=JSON.parse(window.__wxWebEnv.getEnv()).fontScale+'%';
  } catch {
   }
};

iPad

思路介绍：

1. 通过user agent判断浏览器类型和机型。如果发现是微信浏览器，且是iPad，那么就执行本段代码，调整初始字号。
2. 如果当前用户字号fontScale为1，无需缩放，直接结束函数。
3. 如果当前用户字号fontScale不是1，就先把整个<