惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Stack Overflow Blog
Stack Overflow Blog
量子位
让小产品的独立变现更简单 - ezindie.com
让小产品的独立变现更简单 - ezindie.com
美团技术团队
小众软件
小众软件
aimingoo的专栏
aimingoo的专栏
Recent Announcements
Recent Announcements
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
Microsoft Security Blog
Microsoft Security Blog
OSCHINA 社区最新新闻
OSCHINA 社区最新新闻
酷 壳 – CoolShell
酷 壳 – CoolShell
J
Java Code Geeks
V
V2EX
大猫的无限游戏
大猫的无限游戏
D
DataBreaches.Net
博客园 - Franky
爱范儿
爱范儿
T
Tailwind CSS Blog
A
About on SuperTechFans
Google DeepMind News
Google DeepMind News
博客园_首页
B
Blog RSS Feed
博客园 - 司徒正美
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知

少数派

派早报:Google 发布 Fitbit Air 等 - 少数派 「新人报到」確認需求,再開始 - 少数派 从 SOLO 独立开发者社区,我看到了越来越多开发者开始做自己的产品 - 少数派 我怎么管理那些"不常做,但总会忘"的生活事项 - 少数派 人形机器人量产元年,数据才是具身智能的“生死线” - 少数派 BuhoLaunchpad 高度还原 Mac 启动台:开发历程与思考 - 少数派 五年陪伴依然不舍,DIY 换壳后让罗技 MX Master 3 继续服役 - 少数派 新玩意 240|少数派的编辑们最近买了啥? - 少数派 一日一技|为什么你应该关闭 iOS 的键盘声音 - 少数派 我做了个插件和 Skills,一键提取任何网站的设计规范 Design.md - 少数派 住在三四线城市的你,该开始录播客了 - 少数派 甘南秘境,大白高国 - 少数派 AI的审美:谁让把我变成川内倫子 - 少数派 返工怎能不烦恼,打工人片单总有一部是你的「嘴替」 - 少数派 为了让「上厕所」更健康,我做了一个小工具 - 少数派 AI + Skill,能够让生成的文章去除 AI 味吗? - 少数派 新玩意|韶音OpenDots ONE 耳夹式耳机 - 少数派 《美满》| 在每一个春天的晚上相爱(362) - 少数派 新玩意|优篮子 PS01 MagSnap 磁吸支架 - 少数派 自我整合手记 | 我开始早睡了:用稳定规则,为自由托底 - 少数派 用龙虾(OpenClaw)两个多月,我最深的12个体会 - 少数派 听歌时间到,12 张你可能错过的 2025 华语乐坛好专辑 - 少数派 承诺能追吗 - 少数派 macOS 26启动台没了? 我做了个不一样的App启动器 - Keboard - 少数派 《四海为家的人》| INTJ对话INTJ(361) - 少数派 你发过的那些黑历史,是时候一次清干净了 - 少数派 新玩意:安安静静玩,越玩越专注:计客密码机 - 少数派 iPad 用户首次体验 Android 平板:vivo Pad6 Pro - 少数派 数据逻辑强 - 少数派 极北行+ | 一路向北,探访日本至北之地 | 001 - 少数派
全新 iPhone 12 发布,再谈 iPhone 屏幕尺寸 - 少数派
2020-10-19 · via 少数派

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 系列包括 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 自由地在屏幕上呈现,或许才能找到未来的路。

参考文章

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

> 想申请成为少数派作者? 冲!