移动 Web 与混合
mobile-apps、响应式 + PWA。
25 分钟
移动 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/ / 工程 → 原生打包。工具链比纯 Web 多 一环。