携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情。
我是HullQin，公众号线下聚会游戏的作者 欢迎关注公众号，联系我，交个朋友，转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费无广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：《教你做小游戏》、《极致用户体验》。
背景
我是一个在异乡的普通打工人，上次难得回了一趟老家，见了母亲。
母亲告诉我，现在她看手机，已经看不太清了。
我很难过。
我意识到，陪我长大的母亲，终究也要慢慢老去。
不知不觉，母亲已经年过半百。
我拿起她的手机，帮她把所有广告APP删除，帮她把所有APP，都设置了「关怀模式」或「长辈模式」。因为这些模式：字体会放大一些，交互会简洁一些，色彩对比度会强一些。
我告诉她：以后不要乱点广告、乱下载APP了。
我还跟母亲说，我做了个斗地主游戏，以后没欢乐豆也能跟朋友玩斗地主了。
母亲想尝试一下，我就把游戏地址发给了她，并用她手机点开了我的主页。
但是，糟糕的一幕出现了：
我心里一度非常尴尬，我一个追求极致用户体验的人，为什么这点兼容性都做不好？
这个页面被影响的还挺严重，因为发生了汉字重叠，影响了阅读。
其它页面也受了大字号模式的影响，但是没发生汉字重叠，至少是人工可以阅读的状态。
原因
其实，我已经对网页样式做了很用心的适配了，你用任意宽度的设备访问我的网页，都是一切正常，如下图：
其实不难，可以参考文章《2行代码，让你的UI适配移动端、PC端，快来收藏》。
但是奈何，微信网页内实现大字号模式，并非像浏览器一样，整体缩放。而是针对所有font-size做放大。
看得出差别吗？前者是间距、宽度、字号一起缩放。后者间距、宽度不变，只有字号放大。
这就容易导致很多容器设置的宽度，撑不下大字号。
所以，其实绝大多数网页都没有兼容微信的「大字号模式」。例如：掘金前端也没做兼容。
微信的大字号模式
微信大字号模式开启方法有2种：
- 在微信内置浏览器中，点击右上角「…」，再点开「调整字体」。
- 在「我-设置-关怀模式」中，开启关怀模式，这会导致微信内置浏览器的字体默认变为较大字号。
聊聊规划
虽然，微信内置浏览器这么做确实离谱，开启大字号模式后，我们很多原有的网页的样式，都被打破了。
但是微信设计如此，也持续很多年了，以微信的脾气，肯定是不会修改的。
所以前端开发者不得不花精力去兼容。
当然，不要想得太简单。我看网上很多教程提供的解决策略，都是重置大小。即不论用户怎样调整字体大小，都会使网页字体固定为一个大小。但是这背离了「关怀模式」、「大字号模式」的初衷。微信设计这些模式，不就是为了帮助中老年人们看清网页吗？
所以，我下定决心，追求极致的用户体验，让我的网页支持大字号模式！
接下来，我会用几篇文章介绍，如何让网页兼容微信的大字号模式，敬请期待。欢迎关注我和专栏《极致用户体验》。你一定不会后悔！