移动端 UI 尺寸规范

功能

• iPhone 与 iPad 常用机型的逻辑分辨率（pt）、倍率与物理分辨率
• Android 常见的 dp 宽度，并说明它没有统一值
• 安全区：灵动岛机型 59pt、刘海机型 47pt、无刘海 20pt、底部 Home 指示条 34pt
• Android 状态栏 24dp、导航栏 48dp
• 触控目标最小尺寸：Apple 44×44pt、Material 48×48dp、WCAG AA 24×24px、WCAG AAA 44×44px
• iOS 字号阶梯 11 档（Large Title 到 Caption 2）
• Material 3 字号阶梯 15 档（Display 到 Label）
• 间距基准 8pt / 8dp 与常见档位，以及 Material 3 的六个圆角等级
• Material 3 的五个窗口尺寸等级（断点）
• 按机型名查、按数值查（如 390、44）、按分类查三种方式
• 七个分类都在可搜索的下拉里，点一下浏览这一类
• 留空看完整对照表，可以当速查表浏览

使用方法

1. 输入机型名，例如 iPhone 14 Pro，得到逻辑分辨率与倍率
2. 或者直接输入一个数字，例如 390 或 44，看看它是什么
3. 想按类浏览就输入分类，例如「触控目标」；也可以点开下拉选一个分类
4. 留空则列出全部，按七个分类分段

常见问题

设计稿该按多宽开始做？

iOS 一侧，从 375pt 或 390pt 起是常见的两种做法。375 是老基线（iPhone SE、8 那一代），390 是 iPhone 12 之后的常见宽度，而且它是偶数、好做二分之一与三等分。做法上没有唯一答案，但别只按一个宽度做死 —— 同一份设计要在 375 到 440 这段区间里都成立，所以用弹性布局、百分比与自适应约束去接住它，而不是给每个宽度出一版稿。Android 一侧同理，dp 宽度集中在 360 到 412 之间。

这些机型数据会过期吗？

会，而且一定会。 每次新机发布都可能带来新的逻辑分辨率，而这个工具的收录有明确的时间点（页面上写着核对时间）。所以它适合用来查既有机型，遇到刚发布的新机请以厂商页面为准。这也是为什么这里只收常用机型、不追求大而全 —— 一份号称「收录全部机型」的表，恰恰是最容易在某一处悄悄过期的。

触控目标那四个数，我该用哪个？

看你的平台与合规要求：做 iOS 应用就按 Apple 的 44×44pt，做 Android 应用就按 Material 的 48×48dp，这两个是各自平台的官方规定，照做即可。做网页的话要留意 WCAG：AA 级只要求 24×24px，比前两家松很多，但它同时允许「目标之间有足够间距」这条替代方案；而 AAA 级的 44×44px 与 Apple 的数值一致。实践建议是按 44px 做，它在三个标准下都不算小 —— 而且那 4pt 的差距在手指上根本感觉不出来，却能免掉一整类合规问题。

为什么 Android 的尺寸单位是 dp 而不是 pt？

两个单位本质上是同一件事 —— 都是「与像素密度无关的逻辑单位」，只是两家取的名字不同（iOS 叫 point，Android 叫 density-independent pixel）。它们都会被系统按屏幕密度换算成物理像素，所以 360dp 宽的 Android 手机与 375pt 宽的 iPhone 在物理尺寸上其实相差不多。写 CSS 时对应的概念是设备无关的 CSS 像素。名字不同容易让人觉得是两回事，实际换算逻辑是一样的。

为什么没有收录 Android 的具体机型？

因为 Android 机型太多、分辨率太杂，列出来反而会误导：任何一份机型表都会漏掉一大半在用的设备，而漏掉的那些恰恰可能就是你用户手里的。所以 Android 一侧给的是「dp 宽度集中在 360–412」这个区间与两个常见值，配上弹性布局的建议 —— 这对适配比一份机型清单有用得多。需要具体机型数据时，请查厂商的官方规格页。