移动端适配全攻略：从断点设计到触控优化的实战指南

移动端流量早就是大头

接手过一个企业站，PC端流量占60%，移动端40%。但转化数据显示移动端跳出率72%，PC端只有38%。问题很明显：移动端体验太烂，用户进来就跑。

修了两个月，移动端跳出率降到48%，移动端转化率涨了3倍。现在这个站移动端流量占比75%，营收大头全在移动端。

Google从2019年就全面转向移动优先索引，PC端做得再漂亮，移动端不行排名照样上不去。百度也在2020年底上线了移动优先索引。

视口配置是第一步

最基础也最容易漏的一步：

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

没这行meta，手机浏览器会把页面按980px宽度渲染再缩放，文字小到看不清。viewport-fit=cover 是为了适配iPhone X之后的刘海屏，让内容延伸到安全区域外。

断点设计别照抄Bootstrap

Bootstrap默认断点 sm:576px md:768px lg:992px xl:1200px，很多人直接抄。但断点应该基于你自己站点的用户设备分布，不是框架默认值。

打开Google Analytics的设备报告，看用户屏幕宽度分布。我手上一个站点数据显示：

断点设成 375px / 414px / 768px / 1024px，比Bootstrap默认值更贴合真实数据。

触控区域别小于44px

苹果的HIG规定可点击元素最小44x44pt，谷歌Material Design规定48x48dp。小于这个尺寸手指点不准，误触率高。

.button {
    min-width: 48px;
    min-height: 48px;
    padding: 12px 20px;
}

/* 链接的点击区域用padding扩展 */
.nav-link {
    padding: 10px 15px;
    display: inline-block;
}

文字链接尤其要注意，纯文字区域小，加padding扩展可点击范围。

字体大小别用px固定值

移动端用rem或者px但别小于14px。正文16px起步，标题分级递增。Chrome从79版本开始，小于12px的字会自动放大到12px，布局可能错乱。

html {
    font-size: 16px;
}

body {
    font-size: 1rem;
    line-height: 1.6;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

图片自适应

img {
    max-width: 100%;
    height: auto;
}

这两行CSS解决90%的图片溢出问题。背景图用 background-size: cover 适配容器。

针对高分屏提供2x/3x图：

<img src="photo.jpg" 
     srcset="photo.jpg 1x, photo@2x.jpg 2x, photo@3x.jpg 3x"
     alt="产品图">

但别盲目上3x图，体积大4倍以上，弱网用户加载慢。用picture标签按视口宽度切换：

<picture>
    <source media="(max-width: 414px)" srcset="photo-mobile.webp">
    <source media="(max-width: 768px)" srcset="photo-tablet.webp">
    <img src="photo-desktop.webp" alt="产品图">
</picture>

表单是移动端重灾区

PC端表单填得顺手，到手机上各种不跟手。几个关键优化：

<!-- 输入类型正确，触发对应键盘 -->
<input type="email" inputmode="email">
<input type="tel" inputmode="numeric">
<input type="search" inputmode="search">

<!-- 自动填充 -->
<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">

inputmode 比type更精细，比如金额输入用 inputmode="decimal" 弹出数字带小数点键盘。

输入框高度至少48px，padding留够，光标好定位。

性能：移动端网络比你想的差

4G理论速度快，实际用户在地铁、电梯、地下室网速波动大。首屏JS体积超过200KB，弱网下加载超过3秒，用户直接关页面。

移动端首屏资源预算：

移动端专属交互

移动端有些PC端没有的交互方式，用好能提升体验：

1. 下拉刷新

PWA应用支持原生下拉刷新，用CSS的overscroll-behavior控制：

body {
    overscroll-behavior-y: contain;
}

2. 触控手势

左右滑动切换图片、长按保存图片，这些是移动端原生交互。用hammer.js或者原生Touch Events实现。

3. 振动反馈

// 支付成功振动反馈
if (navigator.vibrate) {
    navigator.vibrate(200);
}

别滥用，关键操作反馈用一次就够。

iOS的坑

苹果设备有些专属问题要处理：

/* 100vh问题：iOS Safari的地址栏会导致100vh计算错误 */
.hero {
    height: 100vh;
    height: 100dvh; /* 动态视口高度，iOS 15.4+支持 */
}

/* 输入框聚焦时页面放大 */
input, select, textarea {
    font-size: 16px; /* 不小于16px防止iOS聚焦放大 */
}

/* 安全区适配 */
.safe-area {
    padding-bottom: env(safe-area-inset-bottom);
}

AMP不要碰

AMP早就过时了，Google从2021年取消AMP的搜索优待，普通页面只要CWV达标一样有好的排名。维护AMP版本等于多维护一套代码，得不偿失。

数据验证

某站点移动端优化前后对比：

移动端体验一上去，流量自然往移动端倾斜，营收结构也跟着变。

避坑清单

• 别用 user-scalable=no 禁用缩放，可访问性问题
• 弹窗别全屏覆盖，关闭按钮要大于44px且易点击
• 固定底栏遮挡内容时，body加padding-bottom
• iOS的100vh问题，用 100dvh 替代
• 测试用真机，模拟器和真实设备手感差很多
• 安卓低端机要测，红米Note系列是性能基准线