写点什么

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

作者:HullQin
  • 2022 年 8 月 18 日
    广东
  • 本文字数:1426 字

    阅读完需:约 5 分钟

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

1. 讲个故事

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


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


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


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


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


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

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

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


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

作为产品经理

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


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


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


作为前端开发

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


哪怕产品不提需求,你也应该多花 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 噢~我有空了会分享做游戏的相关技术。

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

HullQin

关注

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

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

评论

发布
暂无评论
[极致用户体验] 2行代码,让你的UI适配移动端、PC端,快来收藏_CSS_HullQin_InfoQ写作社区