网络日志

[极致用户体验] 2行代码,让你的UI适配移动端、PC端,快来收藏

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

1. 讲个故事

移动端适配,每一个前端都绕不开的话题。新手可能会花比较多的时间在上面,也不一定能搞懂。

部分产品经理可能也绕不开移动端适配。比如你做一个内部审批平台,某位老板准备用手机审批时,打开发现样式错乱了,大概率追问下属:“这啥玩意儿,手机上根本看不了啊,我还得去办公室用电脑审批么?”

然后leader们开始逐级向下转发老板消息,到你时,你肯定慌了,老板说要适配移动端,大大小小的leader们都看见了,一定要好好适配啊!不然怕是工作没了。

于是,迫于压力,你开始大显身手。为了适配移动端,重新画原型,通了个宵,终于把手机端的原型图画好了,就等前端去实现了,leader一定会满意的!

结果,前端说:太复杂了,相当于重构所有页面啊,要两个星期!要不我简单适配吧,只要一天。

作为产品的你,难受了:一边是leader们都等着你的结果,你想尽快完成移动端适配;一边是前端完成这个方案耗时太久了,如果简单适配,自己昨晚的通宵,就变得毫无意义。

2. 移动端适配的类型与成本

我亲眼见过2次类似的案例。面对移动端适配,产品经理踌躇满志,打算造个火箭,从而让leader们满意。前端熬夜头发掉光,也没法很快实现产品诉求。

其实出现这种情况,产品经理和前端都可以做得更好。

作为产品经理

做移动端适配,不是真的要你重做原型和交互。用户的诉求(负责审批的老板,也是你的用户),可能很简单:在移动端能看全信息、能审批就行,不是要你做的多华丽。

所以,遇到「移动端适配」这种需求,产品经理一定要先搞清楚用户诉求,才能对症下药。

这里总结了常见的适配手段与其成本:

用户诉求方案前端开发的时间成本(估算)
不同设备上UI布局等比缩放,移动端可以手动缩放,保证能用本文方案看完文本文只需3分钟(1分钟打开本文复制代码、1分钟提交代码、1分钟发布)
字体大小要适合移动端,布局可以根据屏幕宽度重新调整(即响应式布局媒体查询,flex布局等每个组件大概5分钟,每种组件组合花5分钟调试,时间累加(备注:这是最常见的方式,ROI最高的方式)
是C端产品,移动端要有专属UI,原型与PC端完全不同重写UI,可能只有部分功能性函数可以复用成本很高,别轻易搞

作为前端开发

作为一名靠谱的前端开发,最基本的素养就是:你开发的网页,在各种常见屏幕上,绝不能样式错乱。

哪怕产品不提需求,你也应该多花1分钟,保证展示不乱。

下面,我们一起看看如何1分钟时间,添加2行代码,实现移动端适配。赶快点赞、收藏~

3. UI适配移动端、PC端,是哪2行代码?

在html文件的<head>里写:

<meta name="viewport" content="width=device-width,initial-scale=1">

再给body加个样式:

body { min-width: 320px }

备注:320px需要根据实际情况修改。你的网页能在哪个最小的宽度展示完全,就设置为多少。但是最小设置为320px就够了。因为根据我们公司的前端监控显示,移动端设备,宽度在320px以下的已经不到0.01%了。(放心,统计基数够大)

如果你想知道这两个样式是什么效果,可以打开我的游戏网站看看:game.hullqin.cn

或者直接看文章开头的动图哦~

4. 写在最后

祝大家都能做出用户体验好的网页~😎

推荐阅读:

  • 《网页里的「返回」应该用 history.back 还是 push ?》
  • 《你的 Link Button 能让用户选择新页面打开吗?》

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