我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发加微信，交友），转载本文需作者HullQin授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。背景在上一篇文章中，我提到了一个web开发中的常见问题：《在微信大字号模式下，网页样式乱了怎么办？》。以上提供了解决方案。用户调整微信字体大小后，可以保证网页的字体大小不变，解决了样式混乱的问题。但是，上述方案背离了微信“关怀模式”和“大字体模式”的初衷。于是又写了一篇文章：《让你的网页，适配微信大字号模式！体验超好，快来收藏》，介绍几种帮助你的网页适配微信大字体的解决方案。但是在iOS操作系统（iPhone或者iPad）下，还是有问题。如果用户之前设置了网页大字号，那么进入任何网页都会有明显的闪烁：但在Android中，则没有这个问题，直接以大字号显示。分析原因这跟微信大字号的实现有关。而实现方法与模型有关。包括以下三种：Android在Android中，网页不会闪烁，因为Android使用setTextZoom)来设置字体比例。在加载html之前早就设置好了，不需要修改dom。后续用户修改网页字体大小时，只需要在Android端调用setTextZoom即可（这是微信客户端实现的，我们web开发者无需关注）。iPhoneiPhone闪烁是因为要等到html加载完成，渲染页面的JS执行完毕，再在body标签中添加text-size-adjustCSS样式（需要修改dom）。后续用户修改网页字体大小，只需要修改body的text-size-adjustCSS样式即可（这是微信客户端实现的，我们web开发者无需关注）。解决方案如果我们能知道用户设置的缩放比例，主动在我们JS中的body标签中添加text-size-adjust)CSS样式（在渲染前添加），那么闪烁问题就会得到解决。今天在iPad上研究了一下，发现微信iPad上的大字号和iPhone上的大字号实现方式不同！iPad闪烁是因为要等到html加载完成，渲染页面的JS执行完毕，然后在所有包含Text文本的标签上加上一个style属性，直接指定计算出来的font-size。当然，网页元素的原始字体大小存储在元素的属性mp-original-font-size中。动态赋值后，你的DOM结构会变成这样：当后续用户修改字体时，所有元素的font-size会根据mp-original-font-size和缩放比例重新计算，所有元素的样式元素将被动态设置。字体大小。可能有朋友会问：一次设置那么多样式属性会不会很卡？没错，就是很卡。如果在Android、iPhone、iPad上设置大字号，iPad最差！解决方案如果我们能够知道用户设置的缩放比例，并主动为我们JS中所有包含Text的元素添加font-sizeCSS样式（在渲染前添加），那么闪烁问题就会得到解决。开发代码与解题神秘获取了一串神秘代码：JSON.parse(window.__wxWebEnv.getEnv()).fontScale，在微信内置浏览器中，执行该方法获取缩放设置用户规模。当然你必须引用“微信JSSDK”才能使用这段代码，否则会报错。建议配合trycatch使用。需要在html文件的头部引入：对于两个模型iPhone和iPad，解决方案分别给出。iPhone思路介绍：给body设置一个-webkit-text-size-adjust样式，根据字体大小缩放比例设置。constinitIPhoneFontSize=()=>{尝试{document.body.style.webkitTextSizeAdjust=JSON.parse(window.__wxWebEnv.getEnv()).fontScale+'%';}抓住{}};iPad思路介绍：通过用户代理浏览器类型和型号来判断。如果发现是微信浏览器和iPad，则执行这段代码调整初始字体大小。如果当前用户字体的fontScale为1，则不需要缩放，函数直接结束。如果当前用户的fontScale不为1，先隐藏整个body，继续下面的步骤。从body开始，递归遍历子节点，设置所有的mp-original-font-size。从body开始，递归遍历子节点，设置所有样式中的font-size，由mp-original-font-size乘以fontScale计算得出。全部赋值后，再次显示body。至此，初始字体大小设置完毕，屏幕不再闪烁。constinitIPadFontSize=()=>{让fontScale=1;尝试{fontScale=JSON.parse(window.__wxWebEnv.getEnv()).fontScale;}catch{}if(fontScale===1)返回；document.body.style.display='无';constaddOriginFontSize=(root)=>{letflag=false;root.childNodes.forEach((node)=>{if(nodeinstanceofText){if(flag)return;flag=true;root.setAttribute('mp-original-font-size',getComputedStyle(root).fontSize);}elseif(!(nodeinstanceofHTMLScriptElement)){addOriginFontSize(node);}});};constaddFontSize=(nodes)=>{nodes.forEach((node)=>{constfontSize=node.getAttribute('mp-original-font-size');if(fontSize){node.style.fontSize=parseFloat(fontSize)*fontScale+'px';}if(node.children)addFontSize(Array.from(node.children));});};addOriginFontSize(document.body);addFontSize(Array.from(document.body。孩子们））;document.body.style.display='';};判断型号，执行相应的函数navigator.userAgent))initIPhoneFontSize();}实现方式补充说明：按需导入微信JSSDK？如果用户使用的不是微信浏览器，那么完全没有必要引入微信JSSDK。可以判断首先是用户代理，然后动态导入它：);scriptEl.setAttribute('src','//res.wx.qq.com/open/js/jweixin-1.6.0.js');document.head.appendChild(scriptEl);scriptEl.addEventListener('load',()=>{constfontScale=JSON.parse(window.__wxWebEnv.getEnv()).fontScale;});这样在回调函数中，可以获取fontScale。但是为了解决flash的动态问题，你可能需要在document.createElement('script')之前隐藏正文(document.body.style.display='none')。有没有办法统一ipad和iphone的字体大小缩放方法？确实如此。只要我们设置这个变量：window.__wxjs_ipadfontsolution=false;那么在iPad中，缩放字体大小也会通过-webkit-text-size-adjust方法进行缩放。这只是一个兼容性问题。部分iPad不支持该样式，用户无法通过微信控制字体大小。至此，整个方案最为简洁：如果还想按需引入微信JSSDK，然后做一些容错处理，整个逻辑是这样的：if(/MicroMessenger/i.test(navigator.userAgent)&&/iPhone|iPad|iPod|iOS/i.test(navigator.userAgent)){document.body.style.display='none';constscriptEl=document.createElement('脚本');scriptEl.setAttribute('src','//res.wx.qq.com/open/js/jweixin-1.6.0.js');文档.head.appendChild(scriptEl);scriptEl.addEventListener('error',()=>{document.body.style.display='';});scriptEl.addEventListener('load',()=>{试试{window.__wxjs_ipadfontsolution=false;document.body.style.webkitTextSizeAdjust=JSON.parse(window.__wxWebEnv.getEnv()).fontScale+'%';文档.body.style.display='';}赶上{文件.正文。style.display='';}});}我就是用这个方法，亲测有效。大家可以点击我的网站game.hullqin.cn来体验。最后，我是公众号线下派对游戏的作者HullQin（欢迎关注公众号，发送加微信，交友），转载本文需作者HullQin授权。我独立开发了《联机桌游合集》，这是一个网页，在这里你可以轻松地和朋友一起玩网络游戏，五子棋等游戏，不收费，也没有广告。还为GameJam2022开发了《Dice Crush》，喜欢的话可以关注我HullQin哦~有空我会分享制作游戏的相关技术。
