先看一个数据：大部分企业站的流量里，来自手机的比例已经超过六成。但同样是这些网站，手机上打开之后字号小到要放大、按钮挤在一起点不准、表单填一半就放弃。电脑版做得再精致，手机端拉胯，转化照样上不去。
响应式不等于缩小
很多所谓的"移动端适配"，只是让页面宽度跟着屏幕变。真正的适配要解决的是布局逻辑的变化：电脑上并排的三栏，在手机上应该变成纵向堆叠；电脑上靠 hover 展开的菜单，在手机上要能点击展开。
做法上，先用 viewport 声明告诉浏览器按设备宽度渲染：
<meta name="viewport" content="width=device-width, initial-scale=1" />然后用媒体查询针对不同宽度调整布局。断点不用设太多，通常照顾手机、平板、桌面三档就够了。
触控是移动端的头等大事
手指的精度远不如鼠标。几条规定值得写进设计规范：
- 可点击区域不小于 44×44 像素，按钮之间留出足够间距，避免误触
- 别用悬停触发关键信息，手机上没有悬停这个动作
- 弹窗要能一键关掉，关闭按钮做得够大，位置放在拇指够得着的地方
- 横向滚动能免则免，表格可以改成卡片式或者允许局部滑动
尤其是首页那个满屏的咨询弹窗，在手机上几乎一定会挡住内容，很多用户第一反应是直接退出。
表单：移动端流失的重灾区
让用户在大屏上填十个字段都嫌烦，何况手机。移动端表单的原则是能少一项就少一项。
- 只保留必要字段：姓名、手机号、需求，三个够了，其他的后面再问
- 唤起正确的键盘：手机号用
type="tel"，邮箱用type="email"，少切一次键盘就少一次放弃 - 实时校验：填错立刻提示，别等提交之后才把整页刷新一遍
- 提供电话直拨：给号码加上
tel:链接，愿意打电话的人一键就能拨出去
移动端的速度要求更高
手机网络不稳定、设备性能参差，同样的页面在手机上往往比电脑上慢一大截。这时候前面提到的图片压缩和懒加载就更有价值了，另外可以考虑：
- 首屏内容优先加载，把非关键资源往后排
- 字体文件用系统字体或按需裁剪，中文字体包动辄几 MB，能不用就别用
- 减少动画和视差效果，低端机上这些效果会明显掉帧
怎么验收
别只在自己手机上试。找几台不同价位的设备，安卓和 iOS 各来一台，用 4G 网络跑一遍核心流程：打开首页、浏览产品、提交表单、拨打电话。能顺畅走完，才算真的适配好了。
移动端不是电脑版的附属品，对很多行业来说它就是主战场。
—— 一位只看手机端转化数据的运营