從第一代 iPhone 屏幕開始細數(shù)，推測出未來 iPhone 的發(fā)展方向

本文來自微信公眾號“少數(shù)派”，作者：北極熊不不。

從 2007 年發(fā)布的第一代 iPhone 到 2019 年發(fā)布的 iPhone 11 系列，iPhone 的屏幕尺寸已涵蓋 3.5 寸、4 寸、4.7 寸、5.5 寸、5.8 寸、6.1 寸、6.5 寸七種，傳聞將于今年秋季發(fā)布的 iPhone 12 還會增加 5.4 寸、6.7 寸兩種尺寸。隨著時間軸的推移，iPhone 的屏幕尺寸已經變得越來越多，越來越復雜，一個 app 要適配所有的這些屏幕尺寸，在從設計、開發(fā)到推廣的整個過程中都需要考慮諸多因素。

在 iOS 14 Beta 3 版本中，有用戶發(fā)現(xiàn) 5.8 寸的 iPhone X/Xs/11 Pro 機型新增了「放大顯示」功能，進而發(fā)現(xiàn) iOS 14 可以以 960×2079 像素這個新的分辨率正常運行。而在之前的版本中，5.8 寸的 iPhone 機型上一直沒有放大顯示功能，結合新發(fā)現(xiàn)的運行分辨率，我們有理由推測 Apple 正在為一款小屏幕手機做準備，而這個分辨率很可能就是傳聞中即將發(fā)布的 5.4 寸 iPhone 12 的準確分辨率 。

在這 13 年間 iPhone 的屏幕尺寸是怎樣一步步進化到此的?基于軟硬一體的設計，屏幕物理尺寸的變化背后包含著怎樣的進化規(guī)律?這些變化對與我們朝夕相處的手機 app 又產生了什么影響?根據(jù)已有的進化規(guī)律，我們是否可以展望未來的 iPhone 還會走向何方?基于 iOS 14 Beta 中發(fā)現(xiàn)的新線索，我們又可以推斷出 iPhone 12 的哪些更多信息呢?本文就來說道說道。

iPhone 起源：從 3.5 寸的小屏幕開始

從第一代 iPhone 到 iPhone 4s

第一代 iPhone 于 2007 年發(fā)布，配備 320×480 像素(pixel，可簡寫為 px)的 3.5 寸屏幕，PPI (表示每英寸所具有的像素數(shù)，數(shù)字越大清晰度越好)為 163，這塊支持多點觸控的小屏幕開創(chuàng)了 iPhone 歷史的先河。

2008 年 iPhone 3G 發(fā)布，其搭載的 iPhone OS 2.0 系統(tǒng)首次支持了 App Store 功能，自此第三方 app 開始逐漸在 iPhone 上大放異彩;2009 年 iPhone 3GS 發(fā)布，相比前一代，其屏幕從 18 位色升級到了 24 位色，屏幕表現(xiàn)更加豐富。iPhone 3G 和 iPhone 3GS 這兩代的屏幕尺寸和分辨率與初代 iPhone 完全相同，即 320×480px 的 3.5 寸屏幕，PPI 為 163。

2010 年具有全新硬件設計的 iPhone 4 發(fā)布，其屏幕分辨率升級為 640×960px，是前幾代 iPhone 的兩倍，屏幕尺寸仍然保持 3.5 英寸，PPI 達到了 326。在如此高的像素密度下，人眼已經幾乎看不到屏幕上的像素點，因此 Apple 稱之為「Retina / 視網膜屏幕」。2011 年發(fā)布的 iPhone 4s 與前一代的屏幕分辨率和尺寸保持相同。

至此 iPhone 的屏幕分辨率由一種變化到兩種，在同樣大小的 3.5 寸手機屏幕上，更高的分辨率不是為了顯示更多的內容，而是為了讓屏幕上的內容更加清晰。Retina 屏幕在渲染圖像時，每四個像素成為一組，輸出原來屏幕的一個像素顯示的大小區(qū)域內的圖像，以此提供了更高的圖像精細度，下面的對比圖可以直觀地看出這種變化，右邊的圖片明顯比左邊的圖片更加清晰銳利。

如果一個 app 還沒有適配新的 Retina 屏幕分辨率，在 Retina 屏幕上顯示就會顯得很模糊。

既然存在兩種不同的分辨率，在 app 設計上就需要針對它們提供不同尺寸的設計圖，比如下面的這個照相機的圖片，在非 Retina 屏幕上它的高度是 44 像素，而在 Retina 屏幕上的高度就變成了 88 像素，是非 Retina 屏幕上的兩倍。

但我們知道，無論是不是 Retina 屏幕，這個照相機的圖片在 3.5 寸屏幕上的實際顯示大小是相同的，而如果用像素去表示的話，它們的數(shù)字卻是不同的，這會帶來很多溝通和操作成本，需要一種更好的方法去表示這個照相機圖片的尺寸，「Point 點」的概念應運而生。

脫離像素密度：Point 點的誕生

Point 點(可簡寫為 pt)是專門為 Apple 操作系統(tǒng)設計的一個單位，它與屏幕上的像素密度無關，只與屏幕上的內容多少有關。在第一代 iPhone 到 iPhone 3GS 的非 Retina 屏幕上，一個點就等于一像素，可以表示為 @1x;而在 iPhone 4 到 iPhone 4s 的 Retina 屏幕上，一個點等于兩個像素，可以表示為 @2x。而日后發(fā)布的一些設備(如 iPhone 6 Plus、iPhone X)還會出現(xiàn)一個點等于三個像素的情況，可以表示為 @3x，這種 @1x、@2x、@3x 可以稱之為「比例因子」。

從下面的圖示可以看出，在物理尺寸相同時，從 @1x 到 @3x 圖像清晰度依次遞增。

回到上一部分提到的照相機的圖片，它的高度就可以直接統(tǒng)一表示成 44pt，不再需要提及是什么設備、什么樣的屏幕，這樣極大地減少了溝通成本，剔除了設計時無關的干擾因素。

設計師在進行設計時可以直接按照 44pt 的高度進行設計，設計好的圖像對應導出「camera@1x.png」和「camera@2x.png」兩張圖片，非 Retina 屏幕的 iPhone 在顯示時會自動調用第一張圖片，Retina 屏幕的 iPhone 在顯示時會自動調用第二張圖片。

用與像素密度無關的單位「point 點」來表示設計內容的尺寸的優(yōu)勢在日后 iPhone 的屏幕尺寸變得更加復雜之后會更加凸顯。

進一步，第一代 iPhone 到 iPhone 3GS 的屏幕分辨率可以表示為 320×480pt @1x，iPhone 4、iPhone 4s 的屏幕分辨率可以表示為 320×480pt @2x。而使用「point 點」這個單位表示的分辨率我們可以稱之為「邏輯分辨率」，而使用「px 像素」這個單位表示的分辨率我們可以稱之為「渲染分辨率」。

通過「邏輯分辨率」我們可以比較屏幕上顯示內容的多少，前五代 iPhone 的邏輯分辨率相同，所以顯示內容的數(shù)量沒有差別;通過「渲染分辨率」以及屏幕尺寸我們可以計算出 PPI，進一步比較屏幕的清晰度，iPhone 4、iPhone 4s 相比前幾代 iPhone 的屏幕尺寸相同，但渲染分辨率更高，PPI 更高，所以屏幕更加清晰銳利。

不只 Apple 的操作系統(tǒng)中有 point 這樣的與像素密度無關的單位，在其他平臺上為了設計和開發(fā)方便，也同樣存在類似的表示方法，比如 Android 平臺上的單位「dp」，想要了解更多可以查看 Android 設計規(guī)范：material.io/design/layout/pixel-density.html

iPhone 非全面屏時代：屏幕尺寸漸大漸多

4 寸、4.7 寸、5.5 寸全面開花

2012 年 Apple 發(fā)布了配備 4 寸屏幕的 iPhone 5，這是歷史上 iPhone 屏幕尺寸的第一次改變，屏幕的分辨率為 640×1136 px，PPI 仍然為 326，也即相比 iPhone 4s 屏幕清晰度沒有變化，其比例因子仍然為 @2x，其邏輯分辨率為 320×568pt 。iPhone 5 搭載的 iOS 6 系統(tǒng)是 iOS 系統(tǒng)擬物化設計的最后一個版本，也是最成熟的一個版本。

仔細觀察上面的數(shù)字我們可以發(fā)現(xiàn)，相比 iPhone 4s，iPhone 5 在橫向上的內容寬度與前一代保持一致，但縱向上增多了 88pt，也即在縱向上可以顯示更多的內容了。如果一個 app 沒有適配新的 iPhone 5，它將會在 iPhone 5 上以 iPhone 4s 的大小樣式顯示，也即上下會各留出 44pt 的黑邊。

這種通過屏幕邏輯分辨率「橫向不變、縱向變長」來增長屏幕尺寸的方式是 iPhone 屏幕進化的重要方式之一，在日后還會多次看到，同時由于這種變化導致的 app 上下存在黑邊的適配問題也同樣會多次出現(xiàn)。

2013 年 Apple 發(fā)布了相比 iPhone 5 屏幕沒有發(fā)生變化的 iPhone 5s 和 iPhone 5c，它們的屏幕邏輯分辨率仍然為 320×568pt @2x。同年 Apple 推出了 iOS 7，從此設計風格由擬物化風格轉向扁平化風格。

由于屏幕的邏輯分辨率沒有發(fā)生變化，app 就不需要為新機型的屏幕進行適配。凡是可以運行在 iPhone 5 上的 app 都可以在 iPhone 5s、iPhone 5c 上正常顯示。

2014 年 iPhone 6 和 iPhone 6 Plus 同時發(fā)布，iPhone 的屏幕尺寸再次發(fā)生重大變化，根據(jù)不同人群的使用需求和偏好，由之前的一種主流尺寸衍變成了一大一小兩種尺寸。小屏旗艦 iPhone 6 采用 4.7 寸屏幕，屏幕邏輯分辨率為 375×667pt，比例因子為 @2x，PPI 為 326;大屏旗艦 iPhone 6 Plus 采用 5.5 寸屏幕，屏幕邏輯分辨率為 414×736pt，比例因子首次采用 @3x，PPI 為 401。

這次的 iPhone 6 Plus 有一點比較特殊的地方，其渲染分辨率為 1242×2208px，但其設備真實的屏幕物理分辨率只有 1080×1920px，也即處理器渲染的圖像分辨率比屏幕自身物理分辨率更高，在實際顯示時相當于將渲染的圖像縮小了 1.15 倍。圖像在屏幕上顯示時如果能做到像素一對一顯示效果才能最完美，但 Apple 在此機型上作出了妥協(xié)，究其原因可能是因為當時 1080p 的屏幕的廣泛使用可以削減手機成本、加快出貨日期，同時也可以有更好的續(xù)航能力。

這是歷史上 iPhone 屏幕尺寸的第二次重大變化，但與之前的 4 寸 iPhone 5s 仔細對比觀察，你會發(fā)現(xiàn)新的 4.7 寸和 5.5 寸的屏幕與以前的 4 寸屏幕寬高比例是相同的，所以可以理解成 4 寸的屏幕分別「等比放大」了約 1.17 倍和 1.29 倍，變成了現(xiàn)在的 4.7 寸和 5.5 寸屏幕。屏幕邏輯分辨率在寬度和高度上的增加，可以讓屏幕上一次性展示更多內容，減少用戶滾動屏幕的頻率。

至此，從屏幕邏輯分辨率的寬度來看，分化出了三種：320pt、375pt、414pt。在 app 設計時一般以 375pt 寬度為基準，其他寬度 app 的設計進行針對性處理。實際上，這三種寬度的邏輯分辨率一直到 2019 年都沒有再發(fā)生變化。

如果沒有適配新機型的 app 在顯示時，由于和上代 iPhone 具有相同的屏幕比例，所以會直接將 iPhone 5s 的 app 放大顯示到屏幕上。用戶的直觀感受就是雖然屏幕變大了，但僅僅是將原有的內容放大了，而不是在屏幕上可以一次性展示更多內容。而且因為不是像素一對一顯示，屏幕上的內容看上去會不夠清晰銳利。

這種通過將屏幕邏輯分辨率「等比放大」來增長屏幕尺寸的方式也同樣是 iPhone 屏幕進化的重要方式之一，在日后也會多次看到，同時由于這種變化導致的 app 被整體放大顯示的適配問題也同樣會多次出現(xiàn)。

2015 年到 2017 年 Apple 相繼發(fā)布了 iPhone 6s 和 iPhone 6s Plus、iPhone 7 和 iPhone 7 Plus、iPhone 8 和 iPhone 8 Plus，它們的屏幕參數(shù)與 iPhone 6、iPhone 6 Plus 保持了一致。4.7 寸和 5.5 寸屏幕的 iPhone 也在四年間迅速普及。

至此，iPhone 非全面屏時代可以基本宣告結束了。

屏幕不斷被放大的產物：放大顯示功能

如前文所講，iPhone 5s 的 4 寸屏幕、iPhone 6 的 4.7 寸屏幕、iPhone 6 Plus 的 5.5 寸屏幕的寬高比例是相同的，它們是依次放大的。于是從 iPhone 6、iPhone 6 Plus 開始，iOS 新增了一個這些機型獨有的功能——「放大顯示」，簡單來看它將屏幕上的內容放大顯示以便于存在視力障礙的用戶更輕松使用 iPhone，當然你也可以根據(jù)自己的偏好選擇使用放大顯示模式。

將屏幕上的內容，特別是包含了眾多第三方 app 的內容進行整體放大而不讓布局錯亂并不是一件簡單的事，為了減少不必要的設計和開發(fā)成本，放大顯示功能巧妙地利用了已有的屏幕邏輯分辨率。

具體來說，放大顯示的實質是將高一級的邏輯分辨率降級到同一比例的低一級的邏輯分辨率，比如當放大顯示模式開啟時， 5.5 寸屏幕可以使用 4.7 寸屏幕的邏輯分辨率來顯示內容，4.7 寸屏幕可以使用 4 寸屏幕的邏輯分辨率來顯示內容。將低一級的邏輯分辨率放到更大的屏幕上展示，自然會有放大效果，適配了大屏幕 iPhone 的 app 自然也適配了更小屏幕的 iPhone，這樣就可以完全沒有額外的設計和開發(fā)成本。

適配不同尺寸屏幕的布局工具：Auto Layout

隨著 iPhone 機型越來越多，屏幕尺寸越來越多，屏幕的邏輯分辨率也越來越多。設計師和開發(fā)者在設計和開發(fā) app 時需要對多種屏幕布局進行適配調整，才能讓 app 在每一臺 iPhone 上完美運行。

iPhone 上的 app 中的內容包含文字、圖片、按鈕、輸入框、導航欄等各種各樣的形式，我們可以把這些不同形式的元素統(tǒng)稱為「View 視圖」。要確定 iPhone app 中每一個 view 在屏幕上的布局，可以想到的最直觀的方式就是確定這每一個 view 的擺放位置和尺寸，擺放位置可以通過在屏幕上建立坐標系后利用橫縱坐標(x, y)來表示，尺寸可以通過描述一個 view 的寬度和高度來表示。這種確定了每一個 view 的位置和尺寸的布局方式不會受內部或者外部因素所影響，可以稱之為「絕對布局」。

例如下圖中的這個例子，在 iPhone 8 上有一個 app，app 的界面中展示有四個不同顏色的方塊。按照絕對布局的方法來確定四個方塊的位置和尺寸：

紅色方塊的位置坐標是(138，32)，寬度為 100，高度為 100;

黃色方塊的位置坐標是(138，156)，寬度為 100，高度為 100;

綠色方塊的位置坐標是(138，280)，寬度為 100，高度為 100;

藍色方塊的位置坐標是(138，404)，寬度為 100，高度為 100。

當把上面確定的每個方塊的絕對布局參數(shù)放到 iPhone 8 Plus 的屏幕上顯示時，我們就會發(fā)現(xiàn)四個方塊在屏幕上顯示的位置有些奇怪。仔細思考下，在 iPhone 8 的屏幕上四個方塊的位置坐標之所以可以確定下來，是因為我們想要這四個方塊在屏幕水平方向上是居中對齊的。當移動到 iPhone 8 Plus 的屏幕上，屏幕的邏輯分辨率發(fā)生了變化，屏幕變寬了，如果還是按照之前的位置參數(shù)放置四個方塊，其自然不會在屏幕水平方向上處于居中對齊的位置了。

要想要 iPhone 8 Plus 屏幕上的四個方塊在水平方向上也能居中對齊顯示，那四個方塊的位置坐標就需要相對應發(fā)生變化。這種「分而治之」的處理方式固然可以面面俱到，但其耗費的成本也是巨大的，在屏幕尺寸不斷變復雜的時間點上，需要一套方法去整合不同屏幕上的 app 布局，這套方法就是誕生于 iOS 6 并逐漸發(fā)展成熟的「Auto Layout 自動布局」方案。

Auto Layout 是一種相對布局的方案，它不要求直接給出每一個 view 的位置和尺寸信息，而是通過建立 view 之間的約束關系(constraint)，動態(tài)計算出在不同情景時每個 view 的具體位置和尺寸。

來看下圖中的這個例子，藍色方塊命名為「BlueView」，紅色方塊命名為「RedView」，它們之間的距離是 8，通過圖中所示的等式就可以表示出這兩個 view 之間的約束關系，用自然語言來描述就是：

紅色方塊的左端 = 1.0 × 藍色方塊的右端 + 8

這里特別提及的一點是，在描述藍色方塊右端和紅色方塊的左端之所以不直接使用「right 右」和「left 左」這兩個單詞，而是使用了「trailing 尾」和「leading 頭」這兩個單詞，是因為這樣的描述可以更好地兼顧從右向左書寫的語言(如阿拉伯語)的 app 的適配，利于 app 實現(xiàn)國際化。

通過兩個方塊之間相對的約束關系，不論在任何尺寸的屏幕上，這兩個方塊之間的距離都是 8，不會因為兩個方塊各自的位置和尺寸而變動。

回到上面絕對布局中所舉的例子，現(xiàn)在用相對布局的方法來思考下四個不同顏色的方塊該如何布局，按照 Auto Layout 的思想，可以確定界面上 view 的幾個約束關系：

紅色方塊的寬和高 = 黃色方塊的寬和高 = 綠色方塊的寬和高 = 藍色方塊的寬和高 = 100;

紅色方塊的頂部 = 屏幕頂部 + 32;

縱向上不同顏色方塊之間的距離 = 24;

紅色方塊的 X 軸中心位置 = 黃色方塊的 X 軸中心位置 = 綠色方塊的 X 軸中心位置 = 藍色方塊的 X 軸中心位置 = 屏幕的 X 軸中心位置。

通過上面確定的四個約束關系，四個方塊的尺寸固定了下來，但在屏幕上的位置并沒有完全固定，會相對于屏幕尺寸發(fā)生動態(tài)變化。這樣當整個界面顯示在 iPhone 8 Plus 或者其他尺寸的屏幕上時，四個方塊就能始終在屏幕水平方向上居中對齊。

通過 Auto Layout 這個武器，利用相對布局的思想，設計師和開發(fā)者確定好不同 view 之間的約束關系，就能讓整個界面在不同尺寸的設備上都能正確地顯示，不再需要一個設備一套設計方案，這樣的設計也被稱為「適應性布局設計」。

以上示例只是 Auto Layout 的一個簡單示意，在實際情況中，app 界面上包含各種 view，約束關系自然更加復雜，Auto Layout 的作用也會更加明顯。且從更大范圍來看，不只屏幕尺寸變化，Auto Layout 的這種適應性布局設計方案還可以適應各種外部和內部變化：

外部變化：

不同屏幕尺寸;

不同 Size Class(下一部分會講到);

旋轉設備改變使用方向;

iPad 上進入或退出 Slide Over、Split View 模式;

來電和錄音時狀態(tài)欄變高。

內部變化：

App 自身改變導致的內容變化;

App 支持國際化;

App 支持「Dynamic Type 動態(tài)類型」。

想要了解更多可參考 Apple 提供給開發(fā)者的「Auto Layout Guide」。

iOS 、iPadOS 生態(tài)下的重要武器：Size Class

通過 Auto Layout，不同屏幕尺寸的設備都可以用一套設計方案來布局內容，但這并不代表不同尺寸的屏幕上顯示的內容布局都應該是一樣的，比如同一個 app 在 iPhone 和 iPad 上的布局一般是不一樣的，更何況屏幕在使用時還需要區(qū)分橫豎和豎屏的使用場景，app 橫屏和豎屏顯示的內容布局也會不一樣。從 iOS 8 開始推出的「Size Class 尺寸級別」就是為了解決這個問題。

Size Class 根據(jù) app 的實際使用場景定義了不同尺寸的屏幕、不同方向的屏幕在「width 寬度」和「height 高度」上的尺寸級別，較短的寬度/高度定義其級別為「compact」，意為緊湊，可放置較少的內容;較長的寬度/高度定義其級別為「regular」，意為普通，可放置較多的內容。寬度和高度與這兩個級別相互組合就形成了四種尺寸級別。特別注意的是，同一個尺寸的設備，橫屏和豎屏的尺寸級別并不一定是完全相反的。

如下圖，iPhone 8 在豎屏時的 Size Class 是「compact width，regular height」，在橫屏時是「compact width，compact height」;iPhone 8 Plus 在豎屏時是「compact width，regular height」，在橫屏時是「regular width，compact height」，與 iPhone 8 并不相同，因為 iPhone 8 Plus 屏幕尺寸更大。

不同屏幕尺寸、不同屏幕方向的 iPad 也同樣有 Size Class 的定義，如 iPad Pro 11 寸在豎屏時是「regular width，regular height」，在橫屏時也是「regular width，regular height」。特別的，從 iOS 9 開始，iPad 上的 app 支持以 Slide Over 側拉或者 Split View 分屏瀏覽的形式顯示，在這些使用場景中，它們也被定義了 Size Class。

想要了解每個 iPhone 和 iPad 的 Size Class 以及 Size Class 的更多內容可參考 iOS Human Interface Guidelines 中的相關章節(jié)：sspai.com/s/nMlo 以及我的文章：《在不同尺寸的設備上讓 app 都大放異彩：尺寸級別和核心要素 Size Classes and Core Components》steppark.net/15171487371271.html。

有了 Size Class，設計師和開發(fā)者在設計和開發(fā) app 時就不需要根據(jù)繁多的屏幕尺寸和屏幕使用方向等多個內外因素來確定 app 內容布局，新的屏幕尺寸出現(xiàn)時也無需再單獨適配。來看幾個具體的 Size Class 應用實例。

第一個例子，2018 年 6.5 寸屏幕的 iPhone Xs Max 發(fā)布前，有人在 iOS 12 的 Beta 版本中發(fā)現(xiàn)當讓 iPhone 模擬器運行在傳聞中的 iPhone Xs Max 分辨率之下時，部分系統(tǒng)自帶 app 在橫屏時的內容布局與 5.8 寸的 iPhone X 不一樣，比如「信息」app 橫屏時，5.8 寸屏幕只能顯示某個聯(lián)系人的短信內容，但 6.5 寸屏幕就可以分左右兩邊顯示短信列表和具體的短信內容。

據(jù)此進一步印證了 6.5 寸的 iPhone Xs Max 的存在。同一個 app 在不同屏幕尺寸的屏幕上顯示的內容布局不同，究其原因，如下圖所示，在屏幕寬度上 5.8 寸屏幕的 Size Class 是「compact width」，6.5 寸屏幕的 Size Class 是「regular width」，Size Class 不同，所以它們的 app 內容顯示布局不一樣。

第二個例子，再次回到在 Auto Layout 中提到的 app，基于已經確定的四個方塊的約束關系，當在 iPhone 橫屏使用時，我們會發(fā)現(xiàn)由于四個方塊是豎直排列的，所以不能在橫屏時的屏幕上顯示完全，左右兩側還有較大的空間被浪費掉了。

當利用 Size Class 對不同情況下的內容進行布局，iPhone 豎屏也即 Size Class 為「compact width，regular height」時，四個方塊在屏幕上水平居中對齊，縱向排列;iPhone 橫屏也即 Size Class 為「any width，compact height」(any 包括 compact 和 regular 兩種情況)時，四個方塊在屏幕上豎直居中對齊，橫向排列，這時的布局約束關系為：

紅色方塊的寬和高 = 黃色方塊的寬和高 = 綠色方塊的寬和高 = 藍色方塊的寬和高 = 100;

紅色方塊的左側 = 屏幕左側 + 110;

橫向上不同顏色方塊之間的距離 = 24;

紅色方塊的 Y 軸中心位置 = 黃色方塊的 Y 軸中心位置 = 綠色方塊的 Y 軸中心位置 = 藍色方塊的 Y 軸中心位置 = 屏幕的 Y 軸中心位置。

進一步，當 app 運行在 iPad 上，也即 Size Class 為「regular width，regular height」時，四個組成一個方塊組，分兩行排列，整個方塊組在屏幕上豎直居中對齊，這時的布局約束關系為：

紅色方塊的寬和高 = 黃色方塊的寬和高 = 綠色方塊的寬和高 = 藍色方塊的寬和高 = 100;

整個方塊組的左側 = 屏幕左側 + 485;

縱向、橫向上不同顏色方塊之間的距離 = 24;

整個方塊組的 Y 軸中心位置 = 屏幕的 Y 軸中心位置。

這樣同樣的內容在 iPhone 橫屏、豎屏和 iPad 的不同設備和使用場景上布局不同，把上面三種情況的內容布局的約束關系總結概括一下：

共用約束關系：

紅色方塊的寬和高 = 黃色方塊的寬和高 = 綠色方塊的寬和高 = 藍色方塊的寬和高 = 100。

Size Class 為「compact width，regular height」，也即 iPhone 豎屏時：

紅色方塊的頂部 = 屏幕頂部 + 32;

不同顏色方塊之間的距離 = 24;

紅色方塊的 X 軸中心位置 = 黃色方塊的 X 軸中心位置 = 綠色方塊的 X 軸中心位置 = 藍色方塊的 X 軸中心位置 = 屏幕的 X 軸中心位置。

Size Class 為「any width，compact height」，也即 iPhone 橫屏時：

紅色方塊的左側 = 屏幕左側 + 110;

橫向上不同顏色方塊之間的距離 = 24;

紅色方塊的 Y 軸中心位置 = 黃色方塊的 Y 軸中心位置 = 綠色方塊的 Y 軸中心位置 = 藍色方塊的 Y 軸中心位置 = 屏幕的 Y 軸中心位置。

Size Class 為「regular width，regular height」，也即 iPad 橫豎屏時：

整個方塊組的左側 = 屏幕左側 + 485;

縱向、橫向上不同顏色方塊之間的距離 = 24;

整個方塊組的 Y 軸中心位置 = 屏幕的 Y 軸中心位置。

第三個例子，隨著 iPad 的定位在逐漸向電腦靠攏，人們對 iPad 上的 app 生產力要求越來越高，需要利用好 iPad 這塊大屏幕的空間、更容易地在 app 內進行導航，所以在 iPadOS 14 中，iPad app 增加了側邊欄這個導航樣式，用戶可以在側邊欄上更容易找到 app 不同層級的內容入口。

但由于側邊欄占據(jù)了較大的顯示面積，所以側邊欄不適合內容顯示區(qū)域較小的情景。例如下圖中的「音樂」app，在 iPad Pro 11 寸上全屏展示時，此時 Size Class 為「regular width，regular height」，app 使用側邊欄作為導航方式;當「音樂」app 以 Slide Over 形式運行時，此時 Size Class 為「compact width，regular height」，橫向上顯示空間有限，所以 app 改用以前的標簽欄作為導航方式。

想要了解更多有關于 iPadOS 14 側邊欄以及針對 iPad 如何設計 app 的內容，可參考我的文章：《利用好 iPad 的大屏幕 —— 如何為 iPadOS 14 設計 app?- 向遠公園 | Step Park》steppark.net/15942969497015.html

有了 Size Class 這個武器，在 iPhone 和 iPad 上進行 app 的自適應布局設計變得更加方便統(tǒng)一。但目前的 Size Class 并不是完美的，因為 iPad 橫屏和豎屏時的 Size Class 在最初設計時都被定義為了「regular width，regular height」，所以當想要針對 iPad 橫屏和豎屏有不同的內容布局方案時，Size Class 并不能滿足，還需要依靠其他判斷條件。隨著 iPad app 的地位的提高，也許以后的 Size Class 會進化出更多的級別以應對上述情況。

iPhone 轉向全面屏時代：不規(guī)則屏幕的出現(xiàn)

全面屏的 5.8 寸、6.1 寸、6.5 寸

2017 年 iPhone 轉向全面屏時代，搭載 iOS 11、配有 5.8 寸屏幕的 iPhone X 發(fā)布，屏幕分辨率為 1125×2436px，PPI 達到 458，屏幕尺寸和屏幕分辨率都發(fā)生了重大變化，而且屏幕由以前的 LCD 屏改為了 OLED 屏。由于從非全面屏到全面屏的進化，iPhone 去除了 Home 鍵，由軟件層面的 Home Indicator 代替;去除了 Touch ID，由劉海內的Face ID 代替;屏幕的四角也變成了圓角，整塊屏幕不再是規(guī)則的矩形。

5.8 寸的 iPhone X 的邏輯分辨率為 375×812pt，比例因子為 @3x。邏輯分辨率在橫向上是與 4.7 寸的 iPhone 8 的屏幕相同的，在縱向上比 iPhone 8 多了 145 pt，縱向上可以顯示更多內容了。所以 iPhone X 的邏輯分辨率實際上是對 iPhone 8 的邏輯分辨率「橫向不變，縱向變長」得來的，這與從 iPhone 4s 到 iPhone 5 的屏幕進化方式相同。

屏幕變長，未適配新機型的 app 將會在 iPhone X 上以 iPhone 8 的大小顯示，上下留有黑邊。同時，由于劉海和 Home Indicator 的加入、屏幕四角改為圓角，在全面屏 iPhone 上設計開發(fā) app 還需要綜合考慮這些改變，具體可參考我的文章：《Designing For iPhone X —— iPhone 上有了劉海，設計和開發(fā)到底該咋整?》steppark.net/15086036845015.html

2018 年 5.8 寸的 iPhone Xs 發(fā)布，與 iPhone X 的屏幕保持一致，同時全面屏 iPhone 家族新增了 6.5 寸的 iPhone Xs Max，屏幕分辨率為 1242×2688px，PPI 為 458。2019 年 5.8 寸的 iPhone 11 Pro 和 6.5 寸的 iPhone 11 Pro Max 發(fā)布，與上一代的屏幕保持一致。

2018 年 Apple 還同時發(fā)布了 6.1 寸屏幕的 iPhone XR，屏幕分辨率為 828×1792px，PPI 為 326;2019 年 iPhone XR 的繼承者 iPhone 11 發(fā)布，與上一代的屏幕保持一致。

2018 年和 2019 年全面屏 iPhone 家族新增的 6.1 寸屏幕和 6.5 寸屏幕，它們雖然屏幕尺寸不同，但邏輯分辨率相同，都為 414×896pt，不同的是 6.1 寸的比例因子為 @2x，6.5 寸的比例因子為 @3x，所以它們顯示的內容數(shù)量是相同的，但 6.5 寸的屏幕清晰度更高。

這兩個機型的邏輯分辨率在橫向上是與 5.5 寸的 iPhone 8 Plus 相同的，都為 414pt，在縱向上比 iPhone 8 Plus 多了 160pt，所以也是采用「橫向不變，縱向變長」的邏輯進化而來。5.8 寸的全面屏 iPhone 是由 4.7 寸的非全面屏 iPhone 進化而來，6.1 寸/6.5 寸的全面屏 iPhone 是由 5.5 寸的非全面屏 iPhone 進化而來，同時 4 寸、4.7 寸、5.5 寸的非全面屏 iPhone 的寬高比例是相同的，5.8 寸、6.1 寸、6.5 寸的全面屏 iPhone 的寬高比例也是相同的，6.1 寸、6.5 寸也可以看做是由 5.8 寸屏幕「等比放大」而來。

如果 app 沒有適配新的機型，將會在 6.1 寸和 6.5 寸的屏幕上把 iPhone X 的 app放大到全屏顯示，清晰度不如已經適配的 app;如果 app 連 iPhone X 都沒有適配，則會以 iPhone 8 Plus 的大小顯示，上下留有黑邊。有關于更大屏幕的全面屏 iPhone 適配和設計，可參考我的文章：《Designing For iPhone Xs、iPhone Xs Max、iPhone X? — 比大還大，更大的劉海屏 iPhone app 如何適配》steppark.net/15433010141111.html。

不止是 iPhone，iPad Pro 系列也在 2018 年的產品迭代中提高了屏占比例，引入了 Face ID 和 Home Indicator，使軟件層面的操作邏輯與 iPhone 保持一致，iPad Pro 的屏幕進化也發(fā)生了與 iPhone 屏幕進化類似的過程，并且由于 iPad app 支持 Slide Over、Split View 顯示模式，對 app 的適配和設計提出了更高的要求，有關于這一部分可參考我的文章：《Designing For New iPad Pro and Apple Pencil — 適配沒有劉海的 iPad Pro 與有劉海的 iPhone Xs 有什么不同?》steppark.net/15416976044741.html。

為了推動 app 生態(tài)的進化，Apple 在之前也向開發(fā)者發(fā)出通知，2020 年 6 月 30 日之后，所有要更新或新上架的 iPhone app 必須支持所有的 iPhone 屏幕尺寸，iPad app 必須支持所有的 iPad 屏幕尺寸。同時強烈鼓勵開發(fā)者對 iPad app 支持多窗口、多任務功能(側拉、分屏瀏覽、畫中畫)。

適應屏幕新變化：Safe Area

在非全面屏 iPhone 的時代，從 iOS 7 開始，為了讓 app 在設計和開發(fā)時更容易、更正確地進行布局，Apple 引入了「Layout Guide 布局指導」的概念。簡單來說，顯示在 iPhone 上的 app 中不僅包括 app 本身要顯示的內容，如文字、圖片等，還包括一些讓 app 更易用、更統(tǒng)一的系統(tǒng)控件，如狀態(tài)欄、導航欄、標簽欄、搜索欄、工具欄等。這些系統(tǒng)控件一般會在屏幕頂部或底部占據(jù)一定的區(qū)域，而除去這部分才是 app 真正顯示內容的區(qū)域。

如下圖所示，在 iPhone 8 上，屏幕頂部的狀態(tài)欄、導航欄、搜索欄的區(qū)域稱為「Top Layout Guide」，屏幕底部的標簽欄的區(qū)域稱為「Bottom Layout Guide」，app 內真正顯示的內容應該在這兩者之間進行布局。由于屏幕是一個規(guī)則的矩形，無論是豎屏還是橫屏，系統(tǒng)控件只會出現(xiàn)在屏幕頂部和底部，屏幕左右兩側是不受約束的。

進入全面屏時代，劉海的加入，屏幕四角由直角改為圓角使得屏幕不再是一塊規(guī)則的矩形，同時軟件層面 Home Indicator 變成了常駐系統(tǒng)控件，原先的 Top Layout Guide 和 Bottom Layout Guide 已經不能再適應新需求，從 iOS 11 開始進化成了「Safe Area 安全區(qū)域」。

如下圖所示，Safe Area 是一塊可供自定義內容展示的規(guī)則矩形。在豎屏時，由于頂部劉海和底部 Home Indicator 的存在，需要空出這兩塊區(qū)域;在橫屏時，由于一側有劉海，一側沒有，但為保證內容對稱，所以左右兩側需空出等寬的區(qū)域，而屏幕底部也需要為 Home Indicator 空出一定的區(qū)域。進一步，當放置了系統(tǒng)控件之后，Safe Area 會在上面的基礎上進一步縮小。

有了 Safe Area 的定義，app 在設計和布局自定義內容時應該處于 Safe Area 之內，避免與屏幕的圓角、劉海、Home Indicator 發(fā)生重疊或裁切，但對于可滾動的內容以及控件/頁面的背景顏色，可以讓其延伸到屏幕邊緣，以形成連續(xù)顯示的效果。

可以說全面屏 iPhone 的誕生催生了 Safe Area，讓 Layout Guide 更加完善，為眾多第三方 app 在設計和開發(fā)時提供了內容布局指導，以讓它們在整個 iOS 系統(tǒng)中保持一致性。

OLED 屏的影響：支持深色模式

iPhone 從非全面屏向全面屏進化的過程中，部分型號的屏幕也從 LCD 屏幕進化到了 OLED 屏幕，同時伴隨 iPhone 的屏幕尺寸越來越大，耗電自然也會增多，續(xù)航變成了用戶日常使用手機的重要關注點。

基于 OLED 材質屏幕的顯示特點，當屏幕顯示黑色的面積越大越省電，這也是從 iOS 13 開始 app 在系統(tǒng)級別上支持了深色模式的一個原因。適配了深色模式的 app 可以讓用戶根據(jù)需要和偏好選擇使用淺色模式還是深色模式，深色模式可以讓用戶更加聚焦于內容本身，更加適合在燈光條件較暗的環(huán)境下使用手機。但有一點特別注意的是，深色模式不等于低對比度，因為開啟了深色模式而使得 app 上的內容識別度和可讀性下降，這不是一種正確的做法。

更長更大的屏幕下的交互變化

隨著 iPhone 的屏幕尺寸變得越來越多，屏幕變得更長更大，iOS 系統(tǒng)的許多交互也在不斷發(fā)生進化，在此舉兩個例子。

新的大標題導航欄

從 iOS 11 開始，為了讓用戶更加明確自己處于 app 的哪個位置，讓 app 突出自己的核心模塊，系統(tǒng)引入了一種新的導航欄樣式：大標題導航欄，它比以前的導航欄樣式更加醒目，在縱向上占據(jù)了更多的屏幕空間，這增強了剛進入這個頁面的用戶的空間感，而當用戶滾動 app 的內容時，用戶已經知道所處的位置，大標題導航欄又可以自動地縮小，以讓此時的用戶把注意力放在內容本身上。

想要了解更多關于大標題導航欄，可參考我的文章：《iOS 11 的設計有什么新變化》steppark.net/15028131788266.html

新的菜單樣式

在 iOS 14/iPadOS 14 中新增了一種菜單樣式，當用戶點擊按鈕時，新的菜單會直接顯示在菜單旁邊，而不再是使用以前的 Action Sheet(從屏幕底部彈出的菜單選項)樣式，例如下圖中的「提醒事項」app 。新的菜單樣式可以讓用戶在較大的屏幕上更好地理解菜單選項和按鈕之間的關系，同時可以不需要大幅度移動手指就可以完成操作。

值得注意的是，以前的 Action Sheet 樣式也并不是不再使用，當執(zhí)行破壞性操作(比如刪除操作)時，仍然建議使用 Action Sheet 來讓用戶完成操作的二次確認，因為 Action Sheet 會吸引用戶的注意力，只有將手指移動到屏幕底部才能做出選擇，避免了誤觸情況的發(fā)生。

iPadOS 14 中也同樣增加了這種菜單樣式，這也與 macOS 中的彈出菜單交互邏輯保持一致，更有利于 iPad app 通過 Mac Catalyst 技術向 Mac 平臺轉移。

想要了解更多關于 iOS 14/iPadOS 14 新的菜單樣式，可參考我的文章：《iOS 14/iPad OS 14 新組件：菜單、日期和時間選擇器、顏色選擇器》steppark.net/15966406956355.html

全面屏的放大顯示

前文提到，從 iPhone 6 開始，iOS 在部分機型中新增了「放大顯示」功能，放大顯示的實質是將高一級的邏輯分辨率降級到同一比例的低一級的邏輯分辨率。在全面屏 iPhone 中，6.1 寸、6.5 寸的 iPhone 具備放大顯示的這個條件，所以這兩種尺寸的 iPhone 在系統(tǒng)中同樣可以開啟放大顯示模式;但 5.8 寸的 iPhone 不存在比它還要低一級的同一比例的邏輯分辨率，所以 5.8 寸的 iPhone X、iPhone Xs、iPhone 11 Pro 一直沒有放大顯示功能。

展望未來 iPhone

根據(jù)目前媒體獲得的消息，2020 年秋季將會有四款 iPhone 發(fā)布，旗艦系列包括 5.4 寸的 iPhone 12(非最終命名，下同)和 6.1 寸的 iPhone 12 Plus，超旗艦系列包括 6.1 寸的 iPhone 12 Pro 和 6.7 寸的 iPhone 12 Pro Max。

旗艦 iPhone 12 會是什么樣?

本文開頭提到，在 iOS 14 Beta 3 版本中有用戶發(fā)現(xiàn) 5.8 寸的 iPhone 也有了放大顯示這個功能，根據(jù)前文所講的放大顯示的存在條件，我們可以推測存在一款 iPhone 與 5.8 寸 iPhone 的屏幕是同一比例，且邏輯分辨率比 5.8 寸 iPhone 低一級。

同時還發(fā)現(xiàn) Xcode 中的模擬器可以正常運行在 960× 2079px 分辨率下，假設比例因子為 @3x，其屏幕邏輯分辨率就為 320×693pt。綜上兩個發(fā)現(xiàn)，傳聞中的 5.4 寸 iPhone 的屏幕參數(shù)似乎已浮出水面。

5.4 寸 iPhone 12 由 4 寸 iPhone SE 第一代進化而來

小屏旗艦 iPhone 12 配備 5.4 寸屏幕，屏幕渲染分辨率為 960×2079px，PPI 約為 424，邏輯分辨率為 320×693pt @3x;而大尺寸的 iPhone 12 Plus 仍然保持 6.1 寸屏幕，分辨率等與之前的 iPhone XR、iPhone 11 保持一致。

可以看出 5.4 寸 iPhone 12 的邏輯分辨率的寬度與 4 寸的 iPhone SE 第一代是相同的，都是 320pt。5.4 寸的 iPhone 12 的屏幕變化實質也是「橫向不變，縱向變長」，相比 iPhone SE 第一代，縱向上多了 125pt，當 app 沒有適配新尺寸的 iPhone 時，上下會出現(xiàn)黑邊。這樣來看，5.4 寸的 iPhone 12 就是之前大家翹首以待的全面屏 iPhone SE。

屏幕顯示的內容數(shù)量較少

屏幕的邏輯分辨率影響著屏幕上內容的數(shù)量，下圖列舉對比了目前三種寬度邏輯分辨率的 iPhone 顯示同一內容時的實際情況，可以很明顯地看出：

寬度 414pt 的 6.1 寸、6.5 寸 iPhone 顯示的內容最多，375pt 的 5.8 寸 iPhone 次之，320pt 的 5.4 寸 iPhone 最少;

圖片顯示區(qū)域，414pt 寬度的 iPhone 上可以看到第三張圖片的 1/4，375pt 寬度的 iPhone 上幾乎看不到第三張圖片，320pt 寬度的 iPhone 上第二張圖片都不能顯示完全;

文字顯示區(qū)域，屏幕寬度和高度會共同影響屏幕上能顯示文字的數(shù)量;

特別地，320pt 寬度的 5.4 寸 iPhone 上，導航欄的按鈕已經顯得有些擁擠了。

非全面屏 4 寸的第一代 iPhone SE 仍然支持 iOS 14、全面屏 5.4 寸 iPhone 再次引入 320pt 寬度，在屏幕日趨變大的今天，設計師和開發(fā)者仍然需要為 320pt 這樣較窄寬度的 iPhone 進行 app 設計、適配和開發(fā)。

劉海變窄變小?

全面屏 iPhone 的劉海中包含的物理元器件并不隨 iPhone 的屏幕尺寸所變化，根據(jù)網上找到的資料，劉海的寬度大概為 209pt。在目前放出的 iOS 14 Beta 版本中，劉海附近的狀態(tài)欄顯示區(qū)域(包含基本的時間、信號、網絡和電量信息)并沒有發(fā)生設計上的改變，而當把現(xiàn)有的狀態(tài)欄放到 320pt 寬度的 iPhone 上時，會發(fā)現(xiàn)其無法承載現(xiàn)有的狀態(tài)欄信息，那這是否可以推測 5.4 寸的 iPhone 12 抑或是整個 iPhone 12 系列的劉海會變得更窄更小呢?

超旗艦 iPhone 12 Pro 又會是什么樣?

超旗艦 6.1 寸的 iPhone 12 Pro 和 6.7 寸 的 iPhone 12 Pro Max，相比于上一代屏幕尺寸都有一定程度的小幅增大。

根據(jù)之前 iPhone 屏幕邏輯分辨率的進化規(guī)律，我認為 Apple 對于邏輯分辨率的改變是比較謹慎的，因為新的邏輯分辨率對設計師和開發(fā)者就意味著新的設計、適配和開發(fā)工作，iPhone 的屏幕尺寸就會更加碎片化，所以如果 iPhone 12 Pro 的尺寸真的是 6.1 寸和 6.7 寸，猜測屏幕尺寸的整體變大可能是由于屏幕邊框變窄導致，iPhone 12 Pro 系列的屏幕邏輯分辨率和渲染分辨率應該與上一代保持一致，PPI 稍有降低。

iPhone 屏幕還會怎么變?

目前 iPhone 的最大尺寸是 6.5 寸，這個尺寸的手機對于用戶日常使用來說已經基本到達極限，如果按照之前的屏幕進化規(guī)律通過「橫向不變，縱向變長」或者「等比放大」的方法繼續(xù)變大已經沒有必要，但不可否認的是，更大的顯示屏幕更有利于內容的顯示和多任務的操作，對于手機來說，體積盡量小，但屏幕盡量大的折疊屏手機可能會成為未來的發(fā)展方向。

隔壁 Android 陣營已經有多家廠商發(fā)布了折疊屏手機，比如三星 Galaxy Fold、華為 Mate X，折疊屏也很可能成為 iPhone 未來發(fā)展的一個方向，iPhone 的屏幕很有可能出現(xiàn)第三個進化方法——橫向放大，縱向不變。

暢想一下，在折疊屏 iPhone 上，你可以讓 app 按照以前接近兩倍的顯示面積來顯示;也可以讓一個 app 全屏顯示，另一個 app 以小窗口的形式懸浮在另一個 app 之上，類似 iPadOS 上的 Slide Over;更可以讓兩個 app 并排顯示，類似 iPadOS 上的 Split View。

一方面，app 在設計內容布局時使用了 Auto Layout、Size Class、Safe Area 這些武器，app 的布局適應性更高;另一方面更多的 iPad app 已經可以以任何尺寸自適應布局靈活顯示，固定尺寸大小的 app 設計思想正在被弱化，同時 app 多任務、多窗口的功能已在 iPadOS 中進化得逐步完善?；谶@兩方面，到折疊屏 iPhone 推出時，iOS 和 iPadOS 上的 app 適配的陣痛期就會更短。

總的來看，iPhone 屏幕逐漸變大，甚至翻倍，尺寸接近 iPad，iPad 部分功能下放到 iPhone 上，iPhone 與 iPad 的邊界會變得逐漸模糊;同時，iPad 的 app 通過 Mac Catalyst 技術向 Mac 平臺轉移，Mac 逐步放棄 Intel 芯片，逐漸采用 Apple Silicon，iPad 和 Mac 的邊界也同樣在變得模糊?；蛟S在未來的某一天，iPhone、iPad、Mac 的 app 生態(tài)會逐漸融合，合為一體。

總結

從第一代 iPhone 到 iPhone 12，每一次屏幕尺寸的變化不僅僅是硬件上物理參數(shù)的改變，背后還有著縝密的 app 設計邏輯牽制著硬件參數(shù)的變化：

橫向不變，縱向變長：從 iPhone 4s 到 iPhone 5，從 iPhone 8 到 iPhone X，從 iPhone 8 Plus 到 iPhone XR、iPhone Xs Max，從 iPhone SE 第一代到 iPhone 12 都采用了這個變化規(guī)律，縱向上比以前可以看到更多內容;

等比放大：從 iPhone 5s 到 iPhone6、iPhone 6 Plus，從 iPhone X 到 iPhone Xs Max、iPhone XR 都采用了這個變化規(guī)律，橫縱向上都比以前可以看到更多內容;

屏幕尺寸不斷增多，但屏幕邏輯分辨率寬度現(xiàn)在只有 320pt、375pt、414pt 三種。

為了讓 app 能在各種屏幕尺寸的 iPhone 上都能完美顯示，下面的武器必不可少，它們隱藏在 app 背后，默默發(fā)揮著作用：

Point 點：拋開像素密度的干擾，專注于內容數(shù)量的對比;

Auto Layout 自動布局：不對每一臺設備進行絕對布局，通過確定 view 之間的約束關系針對所有設備進行相對布局;

Size Class 尺寸級別：豎屏、橫屏，小屏、大屏，不同使用情景采取不同內容布局方案;

Safe Area 安全區(qū)域：非規(guī)則屏幕下的內容布局規(guī)范。

屏幕尺寸的不斷進化也帶來了 iPhone 上功能和交互的變化：

放大顯示功能：使用低一級的同比例的邏輯分辨率在更大屏幕上顯示內容;

深色模式功能：讓 OLED 屏幕更省電;

新的大標題導航欄：利用更長的屏幕展示更醒目的標題，增強用戶在 app 內的空間感;

新的菜單樣式：縮短用戶操作路徑，讓按鈕與操作之間關系更緊密，與 Mac 上的菜單樣式保持一致。

對于即將到來的 5.4 寸 iPhone 12，基于 iOS 14 Beta 版本中發(fā)現(xiàn)的線索，可以猜想：

從邏輯分辨率上來看，5.4 寸 iPhone 12 基于第一代 iPhone SE 橫向不變，縱向變長進化而來;

小屏便利的同時，內容顯示數(shù)量作出了犧牲，320pt 的屏幕寬度相比于更大尺寸顯示的內容數(shù)量偏少;

劉?？赡軙冋冃∫猿休d完整的狀態(tài)欄信息。

在 iPhone 屏幕尺寸發(fā)展走到極限的今天，未來的 iPhone 可能會朝著折疊屏的方向發(fā)展，出現(xiàn)第三種變化方式——橫向放大，縱向不變，而在這之前已有了許多鋪墊：

iPad 上的 app 支持 Slide Over 側拉、Split View 分屏瀏覽等多任務功能，支持一個 app 的多窗口功能;

App 的內容布局可以自適應多種不同尺寸、不同比例的屏幕，在 Auto Layout、Size Class、Safe Area 的幫助下，固定尺寸的 app 設計思想被弱化，Apple 生態(tài)圈的 app 自由變換顯示尺寸指日可待;

Apple 自身也在強力推進開發(fā)者的 app 適配所有的屏幕尺寸。

縱觀 iPhone 的屏幕進化歷程可以看出 iPhone 的屏幕進化不僅僅是硬件上物理參數(shù)的改變，還伴隨著軟件上設計和開發(fā)邏輯的不斷完善，前期硬件和軟件的進化或許早已為以后的軟硬件埋下了種子，這種軟硬一體，硬件和軟件相互影響、相互牽制的設計思想可能正是解釋很多人會問到的「為什么總感覺 iPhone 比 Android 好用一點，但又說不出具體哪里好?」這種問題的一個答案。

「羅馬不是一日建成的」，智能手機的生態(tài)走到今天，各家手機廠商的產品已是大差不差，但可能就是在那些微不足道的地方的細細耕耘、日積月累默默地抓住了用戶的心。

（編輯：玉景）