📱 移动端 Web 开发概述
移动端 Web 开发是指在手机、平板等移动设备浏览器上运行的网页开发。与 PC 端相比，移动端有屏幕小、交互方式不同（触摸）、网络环境复杂、性能受限等特点。
移动端用户行为特点
- 碎片化使用 — 平均单次使用时长仅 1-2 分钟，应用切换频繁，首屏加载速度至关重要
- 弱网容忍度低 — 研究表明 53% 的用户会在 3 秒内关闭未加载完成的页面
- 单手操作为主 — 拇指热区（屏幕下半部）才是易交互区域，重要操作应优先放在这里
移动端 vs PC 端核心差异
| 维度 | PC 端 | 移动端 |
|---|---|---|
| 屏幕尺寸 | 1024px ~ 1920px+ | 320px ~ 428px（手机），折叠屏展开可达 800px+ |
| 交互方式 | 鼠标（click、hover、右键） | 触摸（tap、swipe、pinch、长按） |
| 像素密度 | 1x（96 DPI） | 2x / 3x（Retina 高清屏） |
| 网络环境 | 宽带 / WiFi 为主 | 4G / 5G / WiFi，可能不稳定 |
| 性能 | CPU / 内存充裕 | 受限于设备，需优化 |
| 浏览器 | Chrome / Edge / Firefox | Safari（iOS）/ Chrome / 微信内置 / 各厂商 WebView（注：iOS 上所有浏览器强制使用 WebKit 内核，无 Blink/V8 可选） |
| 输入方式 | 键盘 + 鼠标 | 虚拟键盘 + 触摸 |
移动端开发的四大核心挑战
- 屏幕碎片化 — 上万种设备、不同屏幕尺寸和像素密度，需要灵活的适配方案
- 触摸交互复杂性 — 从点击到滑动、缩放、长按，触摸事件的判断远比鼠标点击复杂
- 网络与性能瓶颈 — 移动网络不稳定，设备性能差异大，每一毫秒加载、每一帧渲染都需要精打细算
- 多平台兼容性 — iOS WebKit 强制限制、Android 厂商定制、各小程序平台差异，带来持续的兼容工作
移动端开发的三种形态
| 形态 | 技术 | 适用场景 |
|---|---|---|
| 移动 Web（H5） | HTML + CSS + JS | 营销页、活动页、内嵌 H5 |
| 混合 App（Hybrid） | H5 + 原生壳（WebView） | 功能不复杂的 App |
| 小程序 | 各平台私有 DSL | 微信 / 支付宝 / 抖音等生态 |
跨端开发方案全景
在进入具体技术之前，先了解当前业界主流的跨端方案，有助于你根据自己的场景做出技术选型。
| 方案 | 代表技术 | 性能 | 开发成本 | 跨端覆盖 |
|---|---|---|---|---|
| 纯 H5 | HTML + CSS + JS | ★★ | ★ 低 | 所有平台 |
| Hybrid | Cordova、H5+、Hippy | ★★★ | ★★ | iOS + Android |
| 小程序 | 微信、支付宝、抖音等 | ★★★ | ★★ | 各平台生态内 |
| React Native | RN + Hermes | ★★★★ | ★★★ | iOS + Android |
| Flutter | Dart + Skia | ★★★★★ | ★★★ | iOS + Android + Web + Desktop |
| 原生开发 | Swift / Kotlin / Objective-C | ★★★★★ | ★★★★★ | 单平台 |
本教程聚焦的纯 H5 方案，在开发效率和跨端覆盖上是最优解——一套代码运行所有平台，代价是需要面对上述四大核心挑战。