之前寫的文章《從第一代 iPhone 細(xì)數(shù)到 iPhone 12，iPhone 屏幕尺寸進(jìn)化歷程背后的 app 設(shè)計(jì)哲學(xué)》吸引了眾多對(duì) iPhone 屏幕尺寸或者 對(duì) app 適配感興趣的讀者，在文章發(fā)布的各個(gè)渠道，特別是在少數(shù)派引起了一番熱烈的討論。文章從設(shè)計(jì)、開發(fā)等多個(gè)角度講述了 iPhone 屏幕尺寸進(jìn)化歷程背后的 app 設(shè)計(jì)哲學(xué)，希望讀者能夠從我梳理的歷史脈絡(luò)和總結(jié)的進(jìn)化邏輯中獲得啟發(fā)。同時(shí)文章也順勢(shì)推測(cè)了未來 iPhone 特別是 iPhone 12 系列會(huì)出現(xiàn)的一些變化，這部分雖不是文章重點(diǎn)，但當(dāng)時(shí)處于在 iPhone 12 即將發(fā)布的時(shí)間點(diǎn)，自然也引起了眾多讀者的興趣。

如今，iPhone 12 、iPhone 12 Pro 系列正式發(fā)布，屏幕參數(shù)塵埃落定。對(duì)比之前文章對(duì) iPhone 12 屏幕參數(shù)較為保守的推測(cè)，真正的 iPhone 12 屏幕參數(shù)變化可謂十分激進(jìn)。本文就作為之前文章的后續(xù)，基于之前文章所講的 iPhone 屏幕尺寸的進(jìn)化邏輯，來復(fù)盤一下 iPhone 12 的屏幕參數(shù)到底是如何變化的，對(duì)于普通用戶在 iPhone 12 上使用 app 又有什么影響。

如果你還沒有閱讀過之前的文章，強(qiáng)烈推薦你先閱讀，否則本文中的提到到的一些概念你可能會(huì)云里霧里😜

iPhone 12 系列屏幕的變化

iPhone 12 系列包括 6.1 寸 iPhone 12 機(jī)型和 5.4 寸 iPhone 12 mini 機(jī)型，全部配備 OLED 屏幕。

6.1 寸 iPhone 12

6.1 寸 iPhone 12 的屏幕分辨率為 1170px × 2532px，PPI 為 460，與 6.1 寸 iPhone 11 的屏幕分辨率（828px × 1792px）并不相同。在之前文章也有講到過，雖然是相同尺寸，但屏幕由 LCD 材質(zhì)換為 OLED 材質(zhì)，由于成像原理的不同，要想保持同樣的清晰度觀感，分辨率必須提升。 6.1 寸 iPhone 12 的邏輯分辨率為 390pt × 844pt，比例因子為 @3x。Apple 為了保證在屏幕尺寸稍有變大的情況下，PPI 不降低，沒有妥協(xié)繼續(xù)使用 375pt 的邏輯分辨率寬度，而是啟用了全新的邏輯分辨率寬度「390pt」，僅僅增加了 15pt。由邏輯分辨率寬度為 375pt × 812pt 的 5.8 寸 iPhone 11 Pro 進(jìn)化到邏輯分辨率寬度為 390pt × 844pt 的 6.1 寸 iPhone 12，兩者的寬高比例仍然保持相同，所以其變化邏輯仍然采用了之前文章總結(jié)的「等比放大」方法。

既然出現(xiàn)了全新的邏輯分辨率寬度，那 app 要完美運(yùn)行在新的機(jī)型中就需要進(jìn)行適配。沒有適配新機(jī)型的 app 將以 375pt × 812pt@3x（同 5.8 寸 iPhone 11 Pro）的樣式放大顯示在 iPhone 12 上，相當(dāng)于把圖像放大了 1.04 倍，相比已經(jīng)適配的 app 看上去會(huì)有些模糊（具體觀感真機(jī)上手后再來補(bǔ)充）。App 要想適配新機(jī)型，至少需要通過 Xcode 12.1 及以上版本編譯 app，并根據(jù)實(shí)際情況調(diào)整適配 app 布局。

適配的速度就要看各位開發(fā)者了，比如下圖中的「我的天氣」app 在 iPhone 12 發(fā)售前就已經(jīng)完成了對(duì) iPhone 12 系列的適配顯示。

5.4 寸 iPhone 12 mini

5.4 寸 iPhone 12 mini 的屏幕分辨率為 1080px × 2340px，PPI 為 476，清晰度位列 iPhone 12 系列第一名。 由 iPhone 12 mini 的屏幕分辨率除以比例因子 @3x 得到邏輯分辨率 360pt × 780pt，很多人自然而然地就會(huì)以為這就是 iPhone 12 mini 的邏輯分辨率。然而通過已經(jīng)發(fā)布的 Xcode 12.1 GM 版本的模擬器可以查到 iPhone 12 mini 的渲染分辨率（截圖的大?。?shí)際為「1125px × 2436px」，比物理分辨率（屏幕的物理參數(shù)）放大了 1.04 倍。同當(dāng)年的 iPhone 6 Plus 一樣，Apple 再次使用了一樣的變化手法。 1125px × 2436px 的渲染分辨率對(duì)應(yīng)的邏輯分辨率為 375pt × 812pt@3x，正是之前 5.8 寸 iPhone 11 Pro 的邏輯分辨率，這樣 app 想完美運(yùn)行在 iPhone 12 mini 上就無需再進(jìn)行額外的適配工作。但由于像素不是點(diǎn)對(duì)點(diǎn)顯示的，顯示圖像可能會(huì)有不銳利的問題，但由于其高 PPI 的存在，這個(gè)感知不會(huì)明顯。

iPhone 12 Pro 系列屏幕的變化

iPhone 12 Pro 系列包括 6.1 寸 iPhone 12 Pro 機(jī)型和 6.5 寸 iPhone 12 Pro Max 機(jī)型。

6.1 寸 iPhone 12 Pro

6.1 寸 iPhone 12 Pro 與 6.1 寸 iPhone 12 的屏幕參數(shù)完全相同，屏幕分辨率為 1170px × 2532px，PPI 為 460，邏輯分辨率為 390pt × 844pt，比例因子為 @3x。 對(duì)于 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 不降低，沒有妥協(xié)繼續(xù)使用 414pt 的邏輯分辨率寬度，而是啟用了全新的邏輯分辨率寬度「428pt」，僅僅增加了 14pt。由邏輯分辨率寬度為 414pt × 896pt 的 6.5 寸 iPhone 11 Pro Max 進(jìn)化到邏輯分辨率寬度為 428pt × 926pt 的 6.7 寸 iPhone 12 Pro Max，兩者的寬高比例仍然保持相同，所以其變化邏輯仍然采用了之前文章總結(jié)的「等比放大」方法。

對(duì)于 app 適配也是一樣，app 要完美運(yùn)行在新的機(jī)型中就需要進(jìn)行適配。沒有適配新機(jī)型的 app 將以 414pt × 896pt@3x（同 6.5 寸 iPhone 11 Pro Max）的樣式放大顯示在 iPhone 12 Pro Max 上，相當(dāng)于把圖像放大了 1.03 倍，相比已經(jīng)適配的 app 看上去會(huì)有些模糊（具體觀感真機(jī)上手后再來補(bǔ)充）。App 要想適配新機(jī)型，至少需要通過 Xcode 12.1 及以上版本編譯 app，并根據(jù)實(shí)際情況調(diào)整適配 app 布局。

放大顯示功能

在之前文章中有講到目前大部分的 iPhone 機(jī)型都配備了放大顯示功能，關(guān)于放大顯示最重要的一點(diǎn)就是，其實(shí)質(zhì)是將高一級(jí)的邏輯分辨率降級(jí)到同一比例的低一級(jí)的邏輯分辨率。 在 iOS 14 Beta 版本中開始出現(xiàn)了 5.8 寸 iPhone 11 Pro（ 375pt × 812pt@3x）的放大顯示功能，其邏輯分辨率為 320pt × 693pt@3x，當(dāng)時(shí)的推測(cè)是這很可能是 5.4 寸 iPhone 12 mini 的真正分辨率。然而現(xiàn)實(shí)情況是這只是 Apple 虛構(gòu)的一個(gè)機(jī)型分辨率，至少在現(xiàn)在這個(gè)時(shí)間點(diǎn)，這個(gè)機(jī)型是不存在的，當(dāng)我確定這個(gè)結(jié)論時(shí)也是十分詫異。

那這個(gè)虛構(gòu)的邏輯分辨率又用在了哪些地方呢？具體來看： 在有了這個(gè)虛構(gòu)的邏輯分辨率 320pt × 693pt 之后，5.8 寸的 iPhone 11 Pro、iPhone iPhone Xs、iPhone X 機(jī)型自然就支持了放大顯示功能。

但由于這個(gè) 320pt 的全面屏邏輯分辨率寬度不存在于任何一個(gè)現(xiàn)有的機(jī)型，要想 app 正常運(yùn)行在這個(gè)邏輯分辨率之下，也得需要進(jìn)行適配。如果不進(jìn)行適配，將會(huì)以 iPhone 5s 的大小顯示，也即上下有黑邊。

再來看全新的 iPhone 12 系列的放大顯示，6.7 寸的 iPhone 12 Pro Max 開啟放大顯示后，會(huì)降級(jí)到 375pt 寬度，也即 iPhone 11 Pro 大小；6.1 寸 iPhone 12/iPhone 12 Pro 、5.4 寸 iPhone 12 mini 開啟放大顯示后，都會(huì)降級(jí)到 320pt 寬度，也即前面提到的虛構(gòu)機(jī)型的大小，如果 app 沒有適配全面屏的 320pt 邏輯分辨率寬度，同樣會(huì)出現(xiàn)上下有黑邊的情況。

320pt（全面屏）這個(gè)新增的邏輯分辨率寬度隱藏在放大顯示功能背后，可能更不會(huì)引起 app 開發(fā)者的注意，適配的進(jìn)度可能會(huì)更慢。

內(nèi)容顯示數(shù)量

至此，iPhone 12 系列在標(biāo)準(zhǔn)顯示模式下新增了 390pt（iPhone 12/iPhone 12 Pro）、428pt（iPhone 12 Pro Max）兩種新的邏輯分辨率寬度，在放大顯示模式下新增了 320pt（iPhone 12/iPhone 12 Pro、iPhone 12 mini） 一種新的邏輯分辨率寬度?？偣苍黾恿?390pt、428pt、320pt（全面屏） 三種邏輯分辨率寬度。

邏輯分辨率的大小會(huì)決定屏幕上內(nèi)容顯示數(shù)量的多少。針對(duì)于不同邏輯分辨率的屏幕，下圖對(duì)比了其內(nèi)容顯示數(shù)量。幾個(gè)值得特別注意的點(diǎn)：

• 之前的 6.1 寸 iPhone 11 是 414pt 寬度，同 6.5 寸 iPhone 11 Pro Max 一樣，而 6.1 寸的 iPhone 12/iPhone 12 Pro 減少到了 390pt 寬度，相比于以前，橫縱向顯示數(shù)量變少了，但比例因子由 @2x 變?yōu)?@3x，總體上 PPI 也即清晰度大幅提升了。對(duì)于從 iPhone X?、iPhone 11 更新到 iPhone 12、iPhone 12 Pro 的用戶在初期可能會(huì)不適應(yīng)。
• 從 375pt 增加到 390pt，從 414pt 增加到 428pt，雖然橫縱向的確可以顯示更多的內(nèi)容，但對(duì)比發(fā)現(xiàn)后，其實(shí)差異不會(huì)很明顯。
• iPhone 12/iPhone 12 Pro、iPhone 12 mini 的放大顯示都是 320pt，很多 app 可能都沒有適配，而且整體承載內(nèi)容數(shù)量較少較擠，并不適合作為日常使用。

再附一張臺(tái)灣 iOS 開發(fā)者 @ethanhuang13 在 Xcode 模擬器使用不同機(jī)型顯示同一個(gè)網(wǎng)站上的內(nèi)容對(duì)比情況。

Size Class

Size Class 尺寸等級(jí)同樣是之前文章中所提到的 iPhone 尺寸變化過程中的一個(gè)重要概念。

全新的 iPhone 12 系列在豎屏下，毫無懸念，依然同其他 iPhone 一樣是「compact width，regular height」。但在橫屏下，有幾個(gè)需要注意的點(diǎn)：

• 6.1 寸的 iPhone 12/iPhone 12 Pro 系列由于其邏輯分辨率比 6.1 寸 iPhone 11 小一些，所以其橫屏的 Size Class 是 「compact width，compact height」，與 iPhone 12 mini、iPhone 11 一樣。因此在如「信息」這樣支持左右分欄布局樣式的 app 上顯示時(shí)就只能顯示某個(gè)聯(lián)系人的短信內(nèi)容，如下圖；
• 6.7 寸的 iPhone 12 Pro Max 其橫屏的 Size Class 自然是 「regular width，compact height」，與 iPhone 11、iPhone 11 Pro Max 一樣，在「信息」app 中可以分左右兩邊顯示短信列表和具體的短信內(nèi)容，如下圖。

總結(jié)

縱觀 iPhone 12 全系列的屏幕分辨率變化，Apple 為了保持 PPI 也即屏幕清晰度只增不減，不得不在之前已有的邏輯分辨率寬度上同樣利用「等比放大」的方法小幅放大了一點(diǎn)形成了兩個(gè)新的邏輯分辨率寬度：390pt、428pt，同時(shí)為了讓 iPhone X、iPhone iPhone Xs、iPhone 11 Pro、iPhone 12、iPhone 12 Pro、iPhone 12 mini 這些機(jī)型都具備「放大顯示」功能，暗暗增加了 320pt（全面屏）這個(gè)新的邏輯分辨率寬度。整體上可謂十分激進(jìn)的進(jìn)化，雖然顯示效果達(dá)到了最佳，但對(duì)于眾多開發(fā)者和第一批嘗鮮的用戶來說，不得不有一段時(shí)間的陣痛期。這或許也在某些層面體現(xiàn)了 Apple 的偏執(zhí)吧。

而 iPhone 12 mini 再次使用了渲染分辨率與物理分辨率不同的操作方法，也有些許延續(xù)傳統(tǒng)的感覺。

至此到 2020 年的現(xiàn)在這個(gè)時(shí)間點(diǎn)，iPhone 的邏輯分辨率寬度進(jìn)化到了 320pt（非全面屏、全面屏）、375pt（非全面屏、全面屏）、414pt（非全面屏、全面屏）、390pt（全面屏）、428pt（全面屏）八小種、五大種。下圖用圖示的方式展示了從 2007 年到 2020 年 iPhone 屏幕尺寸進(jìn)化的歷程，包括尺寸、物理分辨率、渲染分辨率、邏輯分辨率、PPI、放大顯示功能、進(jìn)化邏輯等，具體可點(diǎn)擊查看大圖。

iPhone 屏幕邏輯分辨率激進(jìn)變化的背景下，或許 Apple 已釋放出了足夠的信號(hào)：未來的屏幕大小不再是一成不變的，app 的顯示區(qū)域也是可大可小的，針對(duì)于不同設(shè)備尺寸適配 app 的方法已經(jīng)過時(shí)，循著 Apple 給出的方法和工具，讓 app 自由地在屏幕上呈現(xiàn)，或許才能找到未來的路。

參考文章

• How iOS Apps Adapt to the various iPhone 12 Screen Sizes | by Geoff Hackworth
• Michael Tsai – Blog – iPhone 12 and iPhone 12 Pro
• 臺(tái)灣 iOS 開發(fā)者 @ethanhuang13 的推文

本文轉(zhuǎn)載自：向遠(yuǎn)公園 | STEP PARK

本文作者：北極熊不不，微博：[eafl id=”107742″ name=”” text=”@北極熊不不”]

原文鏈接：[eafl id=”107738″ name=”尺寸轉(zhuǎn)載鏈接” text=”https://steppark.net/16030487843973.html”]