写点什么

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

作者:HullQin
  • 2022 年 9 月 07 日
    广东
  • 本文字数:1829 字

    阅读完需:约 6 分钟

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

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

背景

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


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


我很难过。


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


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


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


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


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


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


但是,糟糕的一幕出现了:



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


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


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

原因

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



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


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


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


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


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


微信的大字号模式

微信大字号模式开启方法有 2 种:


  1. 在微信内置浏览器中,点击右上角「…」,再点开「调整字体」。

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

发布于: 刚刚阅读数: 5
用户头像

HullQin

关注

公众号【线下聚会游戏】 2020.10.07 加入

game.hullqin.cn 我做了一些联机桌游网页:支持2-10人联机的UNO、2-4人联机的斗地主、2人联机的五子棋。无需下载,点开即玩!叫上朋友,即刻开局!不看广告,不做任务,享受「纯粹」的游戏!

评论

发布
暂无评论
[极致用户体验] 在微信大字号模式下,网页样式乱了怎么办?_CSS_HullQin_InfoQ写作社区