大家好，我是公众号「线下聚会游戏」作者HullQin，开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏。
背景
我是一个在异乡的普通打工人，上次难得回了一趟老家，见了母亲。
母亲告诉我，现在她看手机，已经看不太清了。
我很难过。
我意识到，陪我长大的母亲，终究也要慢慢老去。
不知不觉，母亲已经年过半百。
我拿起她的手机，帮她把所有广告APP删除，帮她把所有APP，都设置了「关怀模式」或「长辈模式」。因为这些模式：字体会放大一些，交互会简洁一些，色彩对比度会强一些。
我告诉她：以后不要乱点广告、乱下载APP了。
我还跟母亲说，我做了个《我做了个《联机桌游合集: UNO+斗地主+五子棋》无需下载，点开即玩！叫上朋友，即刻开局！不看广告，不做任务，享受「纯粹」的游戏！》，以后没欢乐豆也能跟朋友玩斗地主了。
母亲想尝试一下，我就把游戏地址发给了她，并用她手机点开了我的主页。
但是，糟糕的一幕出现了：
我心里一度非常尴尬，我一个追求极致用户体验的人，为什么这点兼容性都做不好？
这个页面被影响的还挺严重，因为发生了汉字重叠，影响了阅读。
其它页面也受了大字号模式的影响，但是没发生汉字重叠，至少是人工可以阅读的状态。
原因
其实，我已经对网页样式做了很用心的适配了，你用任意宽度的设备访问我的网页，都是一切正常，如下图：
其实不难，可以参考文章《2行代码，让你的UI适配移动端、PC端，快来收藏》。
但是奈何，微信网页内实现大字号模式，并非像浏览器一样，整体缩放。而是针对所有font-size做放大。
看得出差别吗？前者是间距、宽度、字号一起缩放。后者间距、宽度不变，只有字号放大。
这就容易导致很多容器设置的宽度，撑不下大字号。
所以，其实绝大多数网页都没有兼容微信的「大字号模式」。例如：掘金前端也没做兼容。
微信的大字号模式
微信大字号模式开启方法有2种：
- 在微信内置浏览器中，点击右上角「…」，再点开「调整字体」。
- 在「我-设置-关怀模式」中，开启关怀模式，这会导致微信内置浏览器的字体默认变为较大字号。
一种解决方案
虽然，微信内置浏览器这么做确实离谱，开启大字号模式后，我们很多原有的网页的样式，都被打破了。
但是微信设计如此，也持续很多年了，以微信的脾气，肯定是不会修改的。
所以前端开发者不得不花精力去兼容。
当然，不要想得太简单。我看网上很多教程提供的解决策略，都是重置大小。即不论用户怎样调整字体大小，都会使网页字体固定为一个大小。
具体解决方案如下：
针对iOS系统，可以这么解决，添加个样式：
body{
-webkit-text-size-adjust: 100% !important;
}
针对安卓系统，需要添加JS代码，如下：
(function() {
function handleFontSize() {
// 设置网页字体为默认大小
WeixinJSBridge.invoke("setFontSizeCallback&", { "fontSize" : 0 });
// 重写设置网页字体大小的事件
WeixinJSBridge.on("menu:setfont", function() {
WeixinJSBridge.invoke("setFontSizeCallback", { "fontSize&" : 0 });
});
}
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
handleFontSize();
} else {
document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
}
})();
以上两段代码都需要加在html里，同时解决了iOS和安卓的大字号模式导致样式错乱的问题。
效果就是：不论用户怎样调整字体大小，都会使网页字体固定为一个大小。
规划
但是这背离了「关怀模式」、「大字号模式」的初衷。微信设计这些模式，不就是为了帮助中老年人们看清网页吗？
所以，我下定决心，追求极致的用户体验，让我的网页支持大字号模式！
请继续阅读：《让你的网页，适配微信大字号模式！体验超好，快来收藏》。
写在最后
我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，发送加微信，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费没广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我 HullQin 噢～我有空了会分享做游戏的相关技术。
