[极致用户体验] 在微信大字号模式下，网页样式乱了怎么办？

最新推荐文章于 2023-02-14 09:59:29 发布

Hull Qin

最新推荐文章于 2023-02-14 09:59:29 发布

阅读量4.5k

点赞数

文章标签：前端 JavaScript js html

本文链接：https://blog.csdn.net/kd_2015/article/details/126913469

版权

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

背景

我是一个在异乡的普通打工人，上次难得回了一趟老家，见了母亲。

母亲告诉我，现在她看手机，已经看不太清了。

我很难过。

我意识到，陪我长大的母亲，终究也要慢慢老去。

不知不觉，母亲已经年过半百。

我拿起她的手机，帮她把所有广告APP删除，帮她把所有APP，都设置了「关怀模式」或「长辈模式」。因为这些模式：字体会放大一些，交互会简洁一些，色彩对比度会强一些。

我告诉她：以后不要乱点广告、乱下载APP了。

我还跟母亲说，我做了个《我做了个《联机桌游合集: UNO+斗地主+五子棋》无需下载，点开即玩！叫上朋友，即刻开局！不看广告，不做任务，享受「纯粹」的游戏！》，以后没欢乐豆也能跟朋友玩斗地主了。

母亲想尝试一下，我就把游戏地址发给了她，并用她手机点开了我的主页。

但是，糟糕的一幕出现了：

我心里一度非常尴尬，我一个追求极致用户体验的人，为什么这点兼容性都做不好？

这个页面被影响的还挺严重，因为发生了汉字重叠，影响了阅读。

其它页面也受了大字号模式的影响，但是没发生汉字重叠，至少是人工可以阅读的状态。

原因

其实，我已经对网页样式做了很用心的适配了，你用任意宽度的设备访问我的网页，都是一切正常，如下图：

![在这里插入图片描述](https://img-blog.csdnimg.cn/844260fad0a343c4a4a49768ba99b02d.gif#pic_

其实不难，可以参考文章《2行代码，让你的UI适配移动端、PC端，快来收藏》。

但是奈何，微信网页内实现大字号模式，并非像浏览器一样，整体缩放。而是针对所有font-size做放大。

看得出差别吗？前者是间距、宽度、字号一起缩放。后者间距、宽度不变，只有字号放大。

这就容易导致很多容器设置的宽度，撑不下大字号。

所以，其实绝大多数网页都没有兼容微信的「大字号模式」。例如：掘金前端也没做兼容。

center)

一种解决方案

虽然，微信内置浏览器这么做确实离谱，开启大字号模式后，我们很多原有的网页的样式，都被打破了。

但是微信设计如此，也持续很多年了，以微信的脾气，肯定是不会修改的。

所以前端开发者不得不花精力去兼容。

当然，不要想得太简单。我看网上很多教程提供的解决策略，都是重置大小。即不论用户怎样调整字体大小，都会使网页字体固定为一个大小。

具体解决方案如下：

针对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 噢～我有空了会分享做游戏的相关技术。