一、跨平台适配概述
大家好，我是你们这门课的主讲。今天咱们聊聊跨平台适配这件事。
说实话，我刚入行那会儿，对「跨平台」这三个字完全没概念。那时候我主要负责 iOS 开发，觉得把 iPhone 上的界面做好就万事大吉了。直到有一天，产品经理拿着一个 Android 手机过来，说「你看，这个按钮在 iPhone 上好好的，怎么到三星上就歪了？」——嗯，从那以后，我才真正开始研究跨平台适配。
什么是跨平台？
说白了，跨平台就是让你的应用能在不同操作系统、不同设备上跑起来，而且体验差不多。
你想想看，用户手里的设备五花八门：有人用 iPhone，有人用华为，有人用 Windows 笔记本，还有人用 iPad。如果你的应用只支持其中一种，那等于把其他用户都拒之门外了。
我个人习惯把跨平台分成两个层面：
- 运行层面：代码能不能在不同系统上执行（比如 Flutter 写的代码能不能同时在 iOS 和 Android 上跑）
- 体验层面：界面在不同屏幕上看起来是不是一样舒服（这个才是我们这门课的重点）
核心观点：跨平台 ≠ 一套代码到处跑。真正的跨平台，是在不同平台上都能提供「原生感」的体验。
为什么需要适配？
这个问题我问过很多刚入行的同学，答案大多是「因为屏幕大小不一样」。嗯，对，但不全对。
我在项目中遇到过这样一个场景：同一个按钮，在 iOS 上点击有弹簧效果，在 Android 上点击有水波纹效果。如果你不做适配，直接把 iOS 的弹簧效果搬到 Android 上，用户会觉得「这 App 用着怪怪的」。
适配的原因，我总结为三点：
- 屏幕尺寸和分辨率差异——这个最直观。iPhone 14 Pro Max 是 6.7 英寸，iPad Pro 是 12.9 英寸，差了一倍多。
- 交互方式不同——iOS 有 3D Touch，Android 有长按菜单，Web 有 hover 状态。每种交互都有自己的一套逻辑。
- 设计语言不一致——iOS 推崇扁平化，Material Design 强调层次感。强行统一反而会显得不伦不类。
避坑指南：我曾经在一个项目中，为了省事，直接把 iOS 的导航栏样式搬到了 Android 上。结果用户反馈说「这个返回按钮怎么在左边？我们 Android 不都是右边吗？」——嗯，从那以后，我再也不敢忽略平台差异了。
主流平台的差异概览
咱们来看看目前主流的四个平台：iOS、Android、Web、桌面。它们之间的差异，我用一张图来展示：
这张图想表达的是：四个平台虽然各有各的脾气，但适配的核心思路是相通的。咱们来逐个看看它们的特点：
| 维度 | iOS | Android | Web | 桌面 |
|---|---|---|---|---|
| 屏幕尺寸 | 相对统一（4.7-6.7寸） | 碎片化严重（4-7寸） | 无限制（手机到电视） | 大屏为主（13-32寸） |
| 分辨率 | Retina 体系（@2x/@3x） | dp 体系（mdpi/hdpi/xhdpi） | CSS 像素（px/em/rem） | 物理像素（96 DPI 基准） |
| 交互方式 | 手势为主（滑、捏、点） | 手势 + 物理按键 | 鼠标 + 键盘 + 触屏 | 鼠标 + 键盘为主 |
| 设计语言 | HIG（人机交互指南） | Material Design | 无统一标准 | 各系统自定（Fluent/ Aqua） |
| 布局单位 | pt（点） | dp（密度无关像素） | px / rem / vw | 物理像素 / DIP |
一个小技巧：我个人习惯在做跨平台项目时，先列一个「平台差异清单」。把每个平台特有的交互、尺寸、字体规范都写下来。这样后面做适配的时候，就不会漏掉关键点。
适配的核心思路
说了这么多差异，那到底怎么适配呢？我总结了一个「三步走」的思路：
- 第一步：统一布局逻辑——用弹性布局（Flexbox）或网格布局（Grid），让界面能自动适应不同宽度。说白了，就是别写死宽度。
- 第二步：处理平台差异——针对每个平台的特殊性，做差异化处理。比如 iOS 用系统字体 San Francisco，Android 用 Roboto。
- 第三步：测试验证——在真机上跑一遍。模拟器只能看个大概，真机上的手感、性能、字体渲染都不一样。
嗯，这里要注意一点：不要追求「100% 一模一样」。不同平台有不同平台的美，强行统一反而会失去平台特色。用户用 iPhone 就是冲着 iOS 的流畅感来的，你非要改成 Android 的返回逻辑，那不是自找麻烦吗？
好了，这一章的内容就到这里。记住一句话：适配不是妥协，而是让每个平台的用户都能获得最好的体验。
本章小结：跨平台适配的核心，是理解平台差异 + 制定统一策略 + 差异化实现。别想着偷懒，也别过度设计。