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