Matrix 首页推荐

Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。

文章代表作者个人观点，少数派仅对标题和排版略作修改。

之前写的文章《从第一代 iPhone 细数到 iPhone 12，iPhone 屏幕尺寸进化历程背后的 app 设计哲学》吸引了众多对 iPhone 屏幕尺寸或者 对 app 适配感兴趣的读者，在文章发布的各个渠道，特别是在 少数派 引起了一番热烈的讨论。文章从设计、开发等多个角度讲述了 iPhone 屏幕尺寸进化历程背后的 app 设计哲学，希望读者能够从我梳理的历史脉络和总结的进化逻辑中获得启发。同时文章也顺势推测了未来 iPhone 特别是 iPhone 12 系列会出现的一些变化，这部分虽不是文章重点，但当时处于在 iPhone 12 即将发布的时间点，自然也引起了众多读者的兴趣。

如今，iPhone 12 、iPhone 12 Pro 系列正式发布，屏幕参数尘埃落定。对比之前文章对 iPhone 12 屏幕参数较为保守的推测，真正的 iPhone 12 屏幕参数变化可谓十分激进。本文就作为之前文章的后续，基于之前文章所讲的 iPhone 屏幕尺寸的进化逻辑，来复盘一下 iPhone 12 的屏幕参数到底是如何变化的，对于普通用户在 iPhone 12 上使用 app 又有什么影响。

如果你还没有阅读过之前的 文章 ，强烈推荐你先阅读，否则本文中的提到到的一些概念你可能会云里雾里😜

（本文章首发于少数派，并发布于 我的个人博客 ，也欢迎你来我的个人博客「 向远公园 | Step Park」逛一逛😄。）

Update：

  • 2020/10/26：更新了「iPhone 12/iPhone 12 Pro 上的 App 适配实例」部分

iPhone 12 系列屏幕的变化

iPhone 12 系列包括 6.1 寸 iPhone 12 机型和 5.4 寸 iPhone 12 mini 机型，全部配备 OLED 屏幕。

6.1 寸 iPhone 12

6.1 寸 iPhone 12 的屏幕分辨率为 1170px × 2532px，PPI 为 460，与 6.1 寸 iPhone 11 的屏幕分辨率（828px × 1792px）并不相同。在之前文章也有讲到过，虽然是相同尺寸，但屏幕由 LCD 材质换为 OLED 材质，由于成像原理的不同，要想保持同样的清晰度观感，分辨率必须提升。6.1 寸 iPhone 12 的逻辑分辨率为 390pt × 844pt，比例因子为 @3x。Apple 为了保证在屏幕尺寸稍有变大的情况下，PPI 不降低，没有妥协继续使用 375pt 的逻辑分辨率宽度，而是启用了全新的逻辑分辨率宽度「390pt」，仅仅增加了 15pt。由逻辑分辨率宽度为 375pt × 812pt 的 5.8 寸 iPhone 11 Pro 进化到逻辑分辨率宽度为 390pt × 844pt 的 6.1 寸 iPhone 12，两者的宽高比例仍然保持相同，所以其变化逻辑仍然采用了之前文章总结的「 等比放大 」方法。

既然出现了全新的逻辑分辨率宽度，那 app 要完美运行在新的机型中就需要进行适配。没有适配新机型的 app 将以 375pt × 812pt@3x（同 5.8 寸 iPhone 11 Pro）的样式放大显示在 iPhone 12 上，相当于把图像放大了 1.04 倍，相比已经适配的 app 看上去会有些模糊。App 要想适配新机型，至少需要通过 Xcode 12.1 及以上版本编译 app，并根据实际情况调整适配 app 布局。

适配的速度就要看各位开发者了，比如下图中的「 我的天气 」app 在 iPhone 12 发售前就已经完成了对 iPhone 12 系列的适配显示。

5.4 寸 iPhone 12 mini

5.4 寸 iPhone 12 mini 的屏幕分辨率为 1080px × 2340px，PPI 为 476，清晰度位列 iPhone 12 系列第一名。由 iPhone 12 mini 的屏幕分辨率除以比例因子 @3x 得到逻辑分辨率 360pt × 780pt，很多人自然而然地就会以为这就是 iPhone 12 mini 的逻辑分辨率。然而通过已经发布的 Xcode 12.1 GM 版本的模拟器可以查到 iPhone 12 mini 的渲染分辨率（截图的大小）实际为「1125px × 2436px」，比物理分辨率（屏幕的物理参数）放大了 1.04 倍。同当年的 iPhone 6 Plus 一样，Apple 再次使用了一样的变化手法。1125px × 2436px 的渲染分辨率对应的逻辑分辨率为 375pt × 812pt@3x，正是之前 5.8 寸 iPhone 11 Pro 的逻辑分辨率，这样 app 想完美运行在 iPhone 12 mini 上就无需再进行额外的适配工作。但由于像素不是点对点显示的，显示图像可能会有不锐利的问题，但由于其高 PPI 的存在，这个感知不会明显。

iPhone 12 Pro 系列屏幕的变化

iPhone 12 Pro 系列包括 6.1 寸 iPhone 12 Pro 机型和 6.7 寸 iPhone 12 Pro Max 机型。

6.1 寸 iPhone 12 Pro

6.1 寸 iPhone 12 Pro 与 6.1 寸 iPhone 12 的屏幕参数完全相同，屏幕分辨率为 1170px × 2532px，PPI 为 460，逻辑分辨率为 390pt × 844pt，比例因子为 @3x。对于 app 适配 iPhone 12 Pro 的逻辑也与 iPhone 12 完全相同，在此不再赘述。

6.7 寸 iPhone 12 Pro Max

6.7 寸 iPhone 12 Pro Max 的屏幕分辨率为 1284px × 2778px，PPI 为 458。6.7 寸 iPhone 12 Pro Max 的逻辑分辨率为 428pt × 926pt，比例因子为 @3x。同样地，Apple 为了保证在屏幕尺寸稍有变大的情况下，PPI 不降低，没有妥协继续使用 414pt 的逻辑分辨率宽度，而是启用了全新的逻辑分辨率宽度「428pt」，仅仅增加了 14pt。由逻辑分辨率宽度为 414pt × 896pt 的 6.5 寸 iPhone 11 Pro Max 进化到逻辑分辨率宽度为 428pt × 926pt 的 6.7 寸 iPhone 12 Pro Max，两者的宽高比例仍然保持相同，所以其变化逻辑仍然采用了之前文章总结的「 等比放大 」方法。

对于 app 适配也是一样，app 要完美运行在新的机型中就需要进行适配。没有适配新机型的 app 将以 414pt × 896pt@3x（同 6.5 寸 iPhone 11 Pro Max）的样式放大显示在 iPhone 12 Pro Max 上，相当于把图像放大了 1.03 倍，相比已经适配的 app 看上去会有些模糊（具体观感真机上手后再来补充）。App 要想适配新机型，至少需要通过 Xcode 12.1 及以上版本编译 app，并根据实际情况调整适配 app 布局。

放大显示功能

在之前文章中有讲到目前大部分的 iPhone 机型都配备了放大显示功能，关于放大显示最重要的一点就是，其实质是将高一级的逻辑分辨率 降级 到 同一比例 的低一级的逻辑分辨率。在 iOS 14 Beta 版本中开始出现了 5.8 寸 iPhone 11 Pro（ 375pt × 812pt@3x）的放大显示功能，其逻辑分辨率为 320pt × 693pt@3x，当时的推测是这很可能是 5.4 寸 iPhone 12 mini 的真正分辨率。然而现实情况是这只是 Apple 虚构的一个机型分辨率，至少在现在这个时间点，这个机型是不存在的，当我确定这个结论时也是十分诧异。

那这个虚构的逻辑分辨率又用在了哪些地方呢？具体来看：在有了这个虚构的逻辑分辨率 320pt × 693pt 之后，5.8 寸的 iPhone 11 Pro、iPhone Xs、iPhone X 机型自然就支持了放大显示功能。

但由于这个 320pt 的全面屏逻辑分辨率宽度不存在于任何一个现有的机型，要想 app 正常运行在这个逻辑分辨率之下，也得需要进行适配。如果不进行适配，将会以 iPhone 5s 的大小显示，也即上下有黑边。

再来看全新的 iPhone 12 系列的放大显示，6.7 寸的 iPhone 12 Pro Max 开启放大显示后，会降级到 375pt 宽度，也即 iPhone 11 Pro 大小；6.1 寸 iPhone 12/iPhone 12 Pro 、5.4 寸 iPhone 12 mini 开启放大显示后，都会降级到 320pt 宽度，也即前面提到的虚构机型的大小，如果 app 没有适配全面屏的 320pt 逻辑分辨率宽度，同样会出现上下有黑边的情况。

320pt（全面屏）这个新增的逻辑分辨率宽度隐藏在放大显示功能背后，可能更不会引起 app 开发者的注意，适配的进度可能会更慢。

内容显示数量

至此，iPhone 12 系列在标准显示模式下新增了 390pt（iPhone 12/iPhone 12 Pro）、428pt（iPhone 12 Pro Max）两种新的逻辑分辨率宽度，在放大显示模式下新增了 320pt（iPhone 12/iPhone 12 Pro、iPhone 12 mini） 一种新的逻辑分辨率宽度。总共增加了 390pt、428pt、320pt（全面屏） 三种逻辑分辨率宽度。

逻辑分辨率的大小会决定屏幕上内容显示数量的多少。针对于不同逻辑分辨率的屏幕，下图对比了其内容显示数量。几个值得特别注意的点：

  • 之前的 6.1 寸 iPhone 11 是 414pt 宽度，同 6.5 寸 iPhone 11 Pro Max 一样，而 6.1 寸的 iPhone 12/iPhone 12 Pro 减少到了 390pt 宽度，相比于以前， 横纵向显示数量变少了 ，但比例因子由 @2x 变为 @3x，总体上 PPI 也即清晰度大幅提升了。对于从 iPhone Xʀ、iPhone 11 更新到 iPhone 12、iPhone 12 Pro 的用户在初期可能会不适应。
  • 从 375pt 增加到 390pt，从 414pt 增加到 428pt，虽然横纵向的确可以显示更多的内容，但对比发现后，其实差异不会很明显。
  • iPhone 12/iPhone 12 Pro、iPhone 12 mini 的放大显示都是 320pt，很多 app 可能都没有适配，而且整体承载内容数量较少较挤，并不适合作为日常使用。

再附一张 台湾 iOS 开发者 @ethanhuang13 在 Xcode 模拟器使用不同机型显示同一个网站上的内容对比情况。

Size Class

Size Class 尺寸等级同样是之前文章中所提到的 iPhone 尺寸变化过程中的一个重要概念。

全新的 iPhone 12 系列在竖屏下，毫无悬念，依然同其他 iPhone 一样是「compact width，regular height」。但在横屏下，有几个需要注意的点：

  • 6.1 寸的 iPhone 12/iPhone 12 Pro 系列由于其逻辑分辨率比 6.1 寸 iPhone 11 小一些，所以其横屏的 Size Class 是 「compact width，compact height」，与 iPhone 12 mini、iPhone 11 一样。因此在如「信息」这样支持左右分栏布局样式的 app 上显示时就只能显示某个联系人的短信内容，如下图；
  • 6.7 寸的 iPhone 12 Pro Max 其横屏的 Size Class 自然是 「regular width，compact height」，与 iPhone 11、iPhone 11 Pro Max 一样，在「信息」app 中可以分左右两边显示短信列表和具体的短信内容，如下图。

iPhone 12/iPhone 12 Pro 上的 App 适配实例

10 月 23 日，6.1 寸的 iPhone 12 和 iPhone 12 Pro 正式发售，我也在真机上对 app 适配的情况进行了测试。

在标准显示模式下，如前文所讲，未适配的 app（未通过 Xcode 12.1 及以上版本编译）会直接等比放大 iPhone 11 Pro 的大小以充满全屏，由于不是点对点显示，屏幕多少会有些发虚的感觉，整体文字显示稍微偏大，但 app 布局一般不存在什么问题，如下图中的「微信」、「微博」，从键盘高度更高就可以看出它们是被等比放大了。

被网友吐槽最多的是 app「哔哩哔哩」，其状态栏（显示时间、网络、电量的顶部区域）与下部的内容发生了重叠，导致搜索栏及其旁边的按钮很难被按到。虽然并不知道「哔哩哔哩」的代码具体是如何写的，但猜测很可能是没有使用 Apple 提供的 Safe Area 定义（之前文章有讲），而是根据机型判断了状态栏下部内容与屏幕顶部的距离，对于之前的全面屏机型统一写死为 44pt，对于其他机型统一写死为 20pt。而在代码未更新前，iPhone 12、iPhone 12 Pro 就属于未知的其他机型，状态栏下部内容自然就与状态栏重叠了。这种判断方法是十分傻瓜的。

iOS 设备的状态栏 Status Bar 高度也是在不断变化的，在非全面屏时代，状态栏的高度一直都是 20pt，所以在当时很多 app 采用了和现在 B 站同样的代码编写逻辑，写死状态栏高度，因为所有非全面屏机型都一样，所以一直没有出过什么问题。但直到 iPhone X 的出现，状态栏高度变成了 44pt（因为刘海区域的存在），增加了 24pt，这让很多写死状态栏高度的 app 原形毕露。不过随着对 iPhone X 的适配，这种问题后面就很少出现了。

从 iPhone X 一直到 iPhone 11 Pro、iPhone 11 Pro Max，状态栏的高度一致都维持 44pt 没变。但从 iPhone 12 系列开始，状态栏的高度又发生了新的变化。通过 Xcode 模拟器可以发现，iPhone 12 mini 的状态栏高度是 50pt，iPhone 12/iPhone 12 Pro、iPhone 12 Pro Max 的状态栏高度是 47pt，和之前完全不一样。而在放大显示模式下，不同机型的状态栏高度还会更加复杂。

Apple 调整全面屏的状态栏高度的原因还不好下定论，但这么多变的状态栏高度就是在时刻提醒开发者不要根据机型判断状态栏高度，应该使用 Apple 提供的 Safe Area 工具进行内容布局。

来到放大显示模式下，iPhone 12 、iPhone 12 Pro 的显示效果可谓是惨不忍睹。如前文所讲，在放大模式下，iPhone 12 /iPhone 12 Pro 的逻辑分辨率宽度是 320pt（全面屏），这是一个完全虚构的机型，如果开发者不够细心，将会完全忽视对它的适配。对于未适配但已经以 Xcode 12 及以上版本编译的 app，可以全屏，但可能布局错乱，例如下图中的「YouTube」、「微博」，底部的标签栏 Tab Bar 很明显出现了错位问题。

而对于未适配也未能以 Xcode 12 及以上版本编译的 app，不能全屏，只能以 iPhone SE（第一代）的大小显示，上下有大黑边，例如上图中的「微信」、「支付宝」。

对于已经适配了的 app，由于其逻辑分辨率宽度只有 320pt，这么窄的宽度上布局非常拥挤，文本也显得很大，真的是老人机的感觉。总的来说，iPhone 12、iPhone 12 Pro 的放大显示模式在当面这个时间点体验很差，几乎是不可用状态。

总结

纵观 iPhone 12 全系列的屏幕分辨率变化，Apple 为了保持 PPI 也即屏幕清晰度只增不减，不得不在之前已有的逻辑分辨率宽度上同样利用「 等比放大 」的方法小幅放大了一点形成了两个新的逻辑分辨率宽度：390pt、428pt，同时为了让 iPhone X、iPhone Xs、iPhone 11 Pro、iPhone 12、iPhone 12 Pro、iPhone 12 mini 这些机型都具备「放大显示」功能，暗暗增加了 320pt（全面屏）这个新的逻辑分辨率宽度。整体上可谓十分激进的进化，虽然显示效果达到了最佳，但对于众多开发者和第一批尝鲜的用户来说，不得不有一段时间的阵痛期。这或许也在某些层面体现了 Apple 的偏执吧。

而 iPhone 12 mini 再次使用了渲染分辨率与物理分辨率不同的操作方法，也有些许延续传统的感觉。

至此到 2020 年的现在这个时间点，iPhone 的逻辑分辨率宽度进化到了 320pt（非全面屏、全面屏）、375pt（非全面屏、全面屏）、414pt（非全面屏、全面屏）、390pt（全面屏）、428pt（全面屏） 八小种、五大种。下图用图示的方式展示了从 2007 年到 2020 年 iPhone 屏幕尺寸进化的历程，包括尺寸、物理分辨率、渲染分辨率、逻辑分辨率、PPI、放大显示功能、进化逻辑等，具体可点击查看大图。

iPhone 屏幕逻辑分辨率激进变化的背景下，或许 Apple 已释放出了足够的信号：未来的屏幕大小不再是一成不变的，app 的显示区域也是可大可小的，针对于不同设备尺寸适配 app 的方法已经过时，循着 Apple 给出的方法和工具，让 app 自由地在屏幕上呈现，或许才能找到未来的路。

参考文章

> 下载少数派 客户端 、关注 少数派公众号 ，了解更妙的数字生活 🍃

> 想申请成为少数派作者？ 冲！