1. 移动端开发概述
大家好，我是这门课的主讲。今天咱们聊聊移动端开发的大背景。说实话，这个领域变化太快了，我入行那会儿还是 jQuery Mobile 的天下，现在回头看，简直像另一个时代。
移动端开发，说白了就是让应用在手机上跑得顺、看着美、用着爽。但这里面的门道，远比你想象的多。我见过太多项目，功能做完了，一上真机就卡成幻灯片。嗯，这就是我们今天要解决的问题。
移动端开发趋势：2024 年我们站在哪里？
先看几个数字。全球移动设备数量已经超过 60 亿台，人均每天花在手机上的时间接近 5 小时。这意味着什么？你的用户，大概率是在手机上第一次接触你的产品。
我个人观察到的几个明显趋势：
- 跨平台开发成为主流——企业不再愿意为 iOS 和 Android 各养一套团队
- 性能要求越来越高——用户对 60fps 的流畅度已经习以为常
- 设备碎片化加剧——从折叠屏到平板，屏幕尺寸千奇百怪
- Web 与原生边界模糊——PWA、小程序让 Web 也能调用硬件能力
我在一家创业公司做过一个项目，团队只有 5 个人，却要同时覆盖 iOS、Android 和 Web。你想想看，如果每个平台都写一套代码，那基本不用干别的了。这就是为什么跨平台方案越来越受欢迎。
React Native vs Flutter vs 原生：怎么选？
这个问题我几乎每次分享都会被问到。说实话，没有银弹。每个方案都有自己的脾气。
| 维度 | React Native | Flutter | 原生开发 |
|---|---|---|---|
| 语言 | JavaScript / TypeScript | Dart | Swift / Kotlin |
| 渲染方式 | 桥接原生组件 | 自绘引擎 (Skia) | 平台原生渲染 |
| 性能 | 接近原生，复杂动画有瓶颈 | 接近原生，动画流畅 | 最优 |
| 学习成本 | 低（前端开发者友好） | 中（需学 Dart） | 高（需学两套语言） |
| 生态成熟度 | 高，社区活跃 | 快速增长中 | 最成熟 |
| 热重载 | 支持 | 支持（状态保留） | 部分支持 |
我个人习惯这样选：
- 如果你的团队是前端出身，想快速出产品——选 React Native。我在项目中用过 RN 重构过一个电商 App，3 个人 2 个月就搞定了，原生团队说至少要 4 个月。
- 如果你对 UI 一致性要求极高，比如设计系统很复杂——选 Flutter。它的自绘引擎让像素级还原变得简单。
- 如果你的应用对性能有极致要求，比如视频编辑、3D 游戏——选原生。这个没得商量。
核心观点：别为了技术选型而选型。先想清楚你的业务场景、团队构成和交付时间。我见过一个团队为了追 Flutter 的热度，硬是把一个简单的表单应用用 Flutter 重写，结果维护成本翻了三倍。
PWA 简介：Web 的逆袭
PWA，全称 Progressive Web App。说白了，就是让网页像原生 App 一样用。
它有几个关键能力：
- 可安装——用户可以把网站添加到桌面，像打开 App 一样
- 离线可用——通过 Service Worker 缓存资源，没网也能用
- 推送通知——像原生 App 一样发通知
- 全屏体验——隐藏浏览器地址栏，沉浸式浏览
我记得有一次给客户做演示，现场网络突然断了。原生 App 直接白屏，而我们的 PWA 版本因为提前缓存了核心页面，照样流畅运行。客户当场就拍板了。
但 PWA 也有局限：
- iOS 支持不完整（尤其是推送通知）
- 无法访问所有硬件 API（蓝牙、NFC 等）
- 应用商店分发受限
我的建议：PWA 适合内容型应用、电商、工具类产品。如果你的应用需要深度硬件交互，还是老老实实用原生或跨平台方案。
移动端适配的核心挑战
好，终于到重点了。移动端适配，说白了就是让你的页面在各种屏幕上都能正常显示。听起来简单？做起来全是坑。
我总结了几大核心挑战：
1. 屏幕尺寸碎片化
从 iPhone SE 的 4.7 寸到折叠屏展开后的 7.6 寸，宽度从 320px 到 414px 甚至更宽。你想想看，一个按钮在 iPhone SE 上刚好，到了折叠屏上可能就变成一个小点。
2. 像素密度差异
同样是 375px 宽度的屏幕，iPhone 8 是 2x 屏，iPhone 14 Pro 是 3x 屏。图片在 2x 屏上清晰，到了 3x 屏上就糊了。我曾经因为这个被设计师追着改了三版。
3. 安全区域与刘海屏
iPhone X 之后的机型都有刘海，Android 也有各种挖孔屏。你的页面内容不能跑到刘海区域里去。嗯，这里要注意，safe-area-inset-* 环境变量一定要用上。
4. 交互方式差异
PC 上是鼠标点击，移动端是手指触摸。手指的点击区域至少要有 44x44pt，不然用户点不准。我见过一个 App 的按钮只有 30px，用户反馈说「点十次有八次没反应」。
5. 网络环境不稳定
移动端用户可能在电梯里、地铁上、山区里。网络随时可能断。你的页面必须能优雅降级，而不是直接白屏。
避坑指南：我曾经在一个项目中，只测试了 iPhone 12 和 13 两款机型就上线了。结果上线后收到大量投诉——用户在 iPad mini 上打开，页面布局完全错乱。从那以后，我养成了一个习惯：至少测试 5 种不同尺寸的设备，包括平板和折叠屏。
好了，这一章我们梳理了移动端开发的整体图景。下一章我会带你深入 React Native 的适配方案，从 viewport 设置到 rem 布局，再到真正的像素级适配。到时候我会拿出我踩过的坑，一个一个给你讲清楚。
记住一句话：适配不是一次性的工作，而是贯穿整个开发过程的思维习惯。