大家好，我是程序员柏风，AI 最全的 Vibecoding 学习地图 http://coderoadmap.cn 作者。
移动 Web 与混合
手机上的「前端」常见三条路：响应式移动 Web、PWA 安装、混合壳 / 跨平台框架。本课建立选型地图；Flutter、Ionic 细节见后两课。
学习目标
- 区分移动 Web、PWA、Hybrid WebView、跨平台原生渲染
- 说清 touch、viewport、安全区与性能约束
- 对照路线图 mobile-apps 节点
四条路径
| 路径 | 技术 | 体验 | 成本 |
|---|---|---|---|
| 移动 Web | 响应式 HTML/CSS | 浏览器内，无商店 | 低 |
| PWA | + Manifest / SW | 主屏幕图标、部分离线 | 低–中 |
| Hybrid | WebView + 原生壳（Cordova/Capacitor） | 商店分发，UI 仍 Web | 中 |
| 跨平台 UI | Flutter / React Native 等 | 更接近原生组件 | 中–高 |
CodeRoadMap platform 移动浏览器访问为主；若要「App 图标」，PWA 往往是 改动最小 的第一步（见 cpf-pwa）。
移动 Web 基础（与 html-css 衔接）
- css-responsive：
meta viewport、弹性布局、断点 - 触控目标 ≥ 44px；避免 hover-only 交互
safe-area-inset适配刘海屏；暗色模式与 html-css-essentials 变量一致
<meta name="viewport" content="width=device-width, initial-scale=1" />
网络与性能
移动网络延迟高、易断线——与 http-protocol-essentials 衔接：
- 图片懒加载、合适
Cache-Control - API 分页；避免首屏巨大 JSON
- SW 离线 fallback（cpf-sw）
react-essentials 应用注意 bundle 体积；frontend-toolchain-essentials 的 code splitting 在移动端更关键。
Hybrid 何时有意义
适合：已有成熟 Web 管理端，要快上 App Store；深度原生 API 少。
不适合：复杂动画、大量列表滚动性能要求接近原生——考虑 Flutter / RN。
Capacitor 典型流：Web 构建产物 → 拷入 android/ / ios/ 工程 → 原生打包。工具链比纯 Web 多 Xcode / Android Studio 一环。
练习
- 用手机 DevTools 远程调试本站
/tracks，找一处可改进的触控间距 - 写表：同一「课程列表」功能，Web / PWA / Hybrid 各需哪些额外文件
- 读 http-caching，列两条移动场景下的缓存建议
小结
移动优先 Web 是底座；PWA 与混合是在分发与离线上的叠加。 下一课 Flutter 概览（Dart + 自绘 UI）。