Apple 在 2017 年 9 月的秋季發(fā)布會上正式發(fā)布了 iPhone X。iPhone X 與之前的 iPhone 不同，為了達到全面屏的效果，實體 Home 鍵被屏幕底部的 Home Indicator 取代，屏幕的四個角由直角變?yōu)榱藞A角，屏幕比例也不再是常見的 16:9，更引人注意的是屏幕頂部還有一個特殊的 Sensor Housing，也即人們俗稱的劉海。這些變化對 iOS app 甚至網(wǎng)站的適配都提出了挑戰(zhàn)，或多或少會影響你正在使用的 app 的功能與交互。
Note：
文章從與 iPhone X 有關的交互設計和視覺設計出發(fā)，略有提及一些開發(fā)相關問題?
由于僅是略懂一些開發(fā)的皮毛，文章中開發(fā)相關的問題的描述大部分是根據(jù)已有資料的自己理解，難免有不準確或錯誤的地方。如有發(fā)現(xiàn)，歡迎指出
文章中大部分圖片資源引用自 Apple 官方，一部分引用自一些其他文章。這部分均已標注出處，如果您是這些文章的作者且覺得這些引用不合適，請盡管告訴我，我會盡快刪除
目錄
前言
針對 iPhone X 這些獨特的新特性，有些人在網(wǎng)上提出了一些有趣的「解決方案」，比如：
橫屏時，列表滾動時文字優(yōu)雅地略過劉海：
（圖片來源：Vojta Stavik 的 Twitter: “I think I’ve fixed the notch issue in landscape ?? ”）
橫屏時，列表滾動時滾動條的怪異移動路徑：
（圖片來源：Zev Eisenberg 的 Twitter: “Here’s what the notch would look like on the other side :wine_glass:"）
將劉海作為 UI 的一部分，從劉海里拉出工具菜單：
有人假設設置里可以控制劉海的「開與關」??：
（圖片來源：Earsbar by Grisha Uglanov - Dribbble）
據(jù)說 iPhone X 發(fā)布后，天貓成為了最大贏家:sweat_smile:：
（圖片來源：朗仙森 的 Twitter: “天貓應該這樣適配一下iPhone X！"）
甚至有人做出了一個快速適配方法，直接將你的 app 放置在 iPhone X 屏幕中間算完:no_mouth:：
（暫時沒找到原始來源）
上面這些方法真的好嗎？關于 iPhone X 的適配到底應該怎么做？這篇文章的目的就是結合 Apple 提供的一些官方資料加上網(wǎng)上大家對 iPhone X 的一些探索，系統(tǒng)地梳理下 iPhone X 在 UI 上的變化和應對方法。
屏幕尺寸
在縱向時，iPhone X 的寬度同 4.7 寸的 iPhone 6、iPhone 7、iPhone 8（也包括放大模式下的 iPhone Plus）一樣，故在寬度上，這幾個設備顯示的內容應該是一樣的；而 iPhone X 的高度上比 4.7 寸屏幕高了 145pt，這使得 iPhone X 增加了 20% 的垂直空間來顯示內容。
iPhone 6, 6s, 7, 8（4.7 寸屏幕，9:16，326ppi）：375pt × 667 pt @2x → 750px × 1334px；
iPhone 6 Plus, 6s Plus, 7 Plus, 8 Plus（5.5 寸屏幕，9:16，401ppi）：414pt × 736 pt @3x → 1242px × 2208px （設備顯示時的物理像素為 1080px × 1920px）；
iPhone Plus 的放大顯示模式：375pt × 667 pt @3x → 1125px × 2001px（設備顯示時的物理像素為 1080px × 1920px）；
iPhone X（5.8 寸屏幕，約 9:19.5，458ppi）：375pt × 812 pt @3x → 1125px × 2436px；
（圖片來源：iPhone X Screen Demystified）
iPhone X 外殼的一些參考尺寸標注：
（圖片來源：iPhone X Screen Demystified）
iPhone 6, 7, 8, X 在 Size Class 中都屬于 Compact Width，這意味著在這些設備上的布局應該是一致的。
（圖片來源：Design+Code - Learn to design and code for iOS 11）
需要為 iPhone X 提供 @3x 的高分辨率的圖片素材，對于一些單色的圖形（Apple 稱之為 Glyph，如用于 tab bar、tool bar 上的 icon）推薦使用不依賴分辨率的 pdf 格式。
Safe Area
從 iOS 11 開始，Auto Layout 中增加了一個新的布局指南：Safe Area Layout Guide，廢棄了在 iOS 11 之前的 Top Layout Guide 和 Bottom Layout Guide。
在 iPhone 8 中，Safe Area 的區(qū)域即除去各種 bar 之后的區(qū)域，如果沒有任何 bar，Safe Area 就是整個屏幕。iPhone 8 豎屏下的 Safe Area 大小：375pt × 667pt。
在 iPhone X 中，豎屏下的 Safe Area 頂部距屏幕頂端 44pt，底部距屏幕底端 34 pt，左右兩邊與屏幕左右兩端對齊。這樣豎屏下的 Safe Area 大小：375pt × 734pt，相比 iPhone 8 增加了 67pt。橫屏下的 Safe Area 左右兩邊距屏幕左右兩端均為 44pt（對稱），底部距屏幕底端 21pt，頂部與屏幕頂端對齊。Safe Area 避免了內容與屏幕的圓角、sensor housing、Home indicator 發(fā)生重疊或裁切。
例如，在 iPhone X 的橫向視圖中，table view 將會橫跨整個屏幕，而 table cell 中的 content view 是嵌入其中的，即在 Safe Area 中，以避免內容被 sensor housing 覆蓋或被屏幕圓角裁切。
Table view cell 中的 content view 會被限制在 Safe Area 中，而文本內容和控件又進一步被 Layout Margin 限制，這使得在整個 app 中的內容邊距能夠保持一致，并且內容能夠與其他控件（如 navigation bar 上的按鈕）對齊。即使你的 app 中沒有使用 Auto Layout，UIView 也提供了 Safe Area 嵌入和 Layout Margin 屬性的值。
布局
確保內容充滿整個 iPhone X 屏幕，確保內容不要被設備的圓角、傳感器模塊（Sensor Housing，也即劉海）、主屏幕指示器（Home Indicator）遮蓋。
例如「Carrot Weather」針對 iPhone X 的適配，讓天氣的背景延伸到屏幕邊緣：
可以使用 Xcode 中的模擬器提前預覽 app 在 iPhone X 上的效果，檢查被裁切或者其他布局問題。而對于一些特別的功能特征，像廣色域圖像，最好就是在 iPhone X 真機上進行測試。
提供一個全屏的使用體驗：確保背景延伸到了屏幕的邊界，像 tables、collections 這種豎直滾動的布局要一直延續(xù)到屏幕底部，不應被限制在 Safe Area 中。不管 table view 中的 cell 是否在 Home Indicator 的后面，輕點屏幕底部的 cell 依然可以正常操作。
圖片
當復用已有的圖片資源時，注意長寬比率的不同：iPhone X 有一個特殊的長寬比率，因此，在 4.7 寸屏幕上的圖片資源全屏展示在 iPhone X 上時，可能會被左右裁切或者出現(xiàn)信箱 letterboxing 模式（即上下有黑條）。與之相反，如果一個可以全屏顯示在 iPhone X 上的圖片資源拿到 4.7 寸 iPhone 上去，圖片就會被上下裁切或者出現(xiàn)郵筒 pillarboxing 模式（即左右有黑條）。最好是采用兼容性的圖片，以確保在所有的屏幕尺寸中，重要的視覺內容都能被看到。
有關信箱模式（Letterboxing）、郵筒模式（Pillarboxing）、窗口模式（Windowboxing）的參考說明
控件
不要對屏幕的幾個新特征進行掩蓋或者吸引用戶特別注意：不要嘗試通過在屏幕頂部或底部使用黑色的 bar 來隱藏設備的圓角、sensor housing、Home Indicator，這會使得你的 app 看上去很狹小擁擠，與其他在 iPhone X 上的 app 不一致。不要使用一些視覺裝飾物（如括弧、邊框、形狀或指導性文字）使用戶對這些區(qū)域特別注意。
避免內容被裁切：使用標準的、系統(tǒng)提供的交互元素，使用 Auto Layout 構建 app 的交互。App 應該遵守由 UIKit 定義的 Safe Area 和 Layout Margin，這確保內容可以根據(jù)設備和情景合適的嵌入。 Safe Area 也會阻止內容被 status bar、navigation bar、toolbar、tab bar 覆蓋。
避免把一些交互控制元素恰好放置在屏幕的底部或者角落：用戶在使用 iPhone X 時，會在屏幕底部使用滑動手勢來訪問主屏幕或者切換 app，這個手勢會影響你在屏幕底部自定義的手勢。屏幕的幾個角落放置的內容可能會被屏幕的圓角、sensor housing、Home indicator 遮擋覆蓋，并且對于用戶來說也是難以輕松地觸碰到的。可以通過 Safe Area 和 Layout Margin 來確定合適的嵌入值。
大多數(shù)情況下，在橫屏視圖時，內容、控件能夠居中對稱顯示是最好的。在設備旋轉方式不同的情況下，如果是不對稱的布局，控件會左右發(fā)生漂移，這將會造成不連貫的用戶體驗，潛移默化地破壞用戶建立肌肉記憶的能力。
Status Bar
注意 status bar 的高度：在 iPhone X 中，相比其他 iPhone status bar 更高（iPhone X 的 status bar 高度為 44pt，其他設備為 20pt）。如果你的 app 假定了一個固定的 status bar 高度，以此來在 status bar 下面放置內容，你必須更新你的 app 以基于用戶設備動態(tài)放置內容。
特別注意，在 iPhone X 中，當某些后臺任務（如通話中、錄音中、位置記錄中）進行時、status bar 不會像其他 iPhone 一樣改變高度。這為提供連貫的用戶體驗提供了幫助。
如果你的 app 現(xiàn)在是隱藏 status bar 的，你需要在 iPhone X 上重新考慮這個：iPhone X 在垂直方向上比 4.7 寸 iPhone 提供了更多空間來顯示內容。Status bar 中也展示了用戶覺得很有用的信息。Status bar 應該只在真正有價值的時候被隱藏。
Home Indicator
Home indicator（134pt × 5pt）可以提示用戶從屏幕底部向上輕掃可以訪問主屏幕或者切換 app，這是 iOS 設備的一個核心交互，因此 Home indicator 應該總是被清晰可見的。iOS 會根據(jù)當前的背景顏色，動態(tài)地調整 Home indicator 顯示為白色或黑色，以保證與背景有足夠的對比度。確保不要把一些交互元素放的離 Home indicator 很近。
謹慎地允許 Home indicator 可以自動隱藏：當自動隱藏功能被打開時，如果用戶在幾秒鐘沒有觸碰屏幕，Home indicator 就會自動隱藏，用戶再次觸碰屏幕時，Home indicator 就會再次出現(xiàn)。這個行為只應該在像播放視頻、圖片幻燈片時被啟用。
顏色
iPhone X 的屏幕支持 Display P3 色域，相比 sRGB 可以顯示更加多樣、沉浸的顏色。
使用廣色域來增強視覺體驗：使用了廣色域的圖片和視頻會看上去更加生動，視覺數(shù)據(jù)和狀態(tài)指示器會更加有沖擊力。
手勢
在 iPhone X 中使用屏幕邊緣來觸發(fā)訪問主屏幕、app 切換、打開通知中心、打開控制中心的動作。
Home Indicator 相關手勢：
訪問主屏幕：向上輕掃 Home Indicator
訪問多任務處理：向上輕掃 Home Indicator 并停頓一下
切換到上一個使用的 app：向上輕掃 Home Indicator 并順勢向右滑動
(圖片來源：iMore)
左右快速切換 app：左右輕掃 Home Indicator
界面下移懸停？：從 iPhone X 相關代碼中看出 iPhone X 仍可開啟界面下移懸停功能，開啟方法可能是輕點（不按下）兩下 Home Indicator（由于 Home Indicator 不是實體按鍵，這樣操作似乎容易誤操作，但該操作在目前 iPhone 中就是通過輕點兩下 Home 鍵；來實現(xiàn)的），僅供猜測??，待上市后驗證。
劉海相關手勢：
訪問通知中心：從「劉海」左側向下輕掃
(圖片來源：The Verge)
訪問控制中心：從「劉海」右側向下輕掃
避免與系統(tǒng)全局的屏幕邊緣手勢沖突：在各個 app 中，人們依賴于這些手勢。只在很少的一些情況下，一些沉浸式的 app 如游戲類 app 可能需要一些比系統(tǒng)手勢優(yōu)先級更高的自定義的屏幕邊緣手勢，第一次滑動響應 app 指定的手勢（同時正常的 Home indicator 會被拉起并進入可用狀態(tài)），第二次滑動才響應系統(tǒng)的手勢。這個行為被稱為 edge protection，一旦開啟，Home indicator 將會有一個更加細致的外觀，對于用戶來說就很難訪問系統(tǒng)級別的動作，導致不連貫的用戶體驗，所以它只應該在確實需要的情況下被啟用。
按鍵
由于 iPhone X 取消了實體 Home 鍵，引入了 Home Indicator，原來的電源鍵現(xiàn)在稱之為「側邊按鈕」，這使得原有的一些功能的操作方法發(fā)生了變化。
使用 Siri：按住側邊按鈕。
用 Apple Pay：連按兩下側邊按鈕。
截屏：按住側邊按鈕加音量增或音量減按鈕。
進入 SOS 緊急聯(lián)絡：按住側邊按鈕和任一音量按鍵、快速點按側邊按鈕五次（需在設置中開啟），SOS 緊急聯(lián)絡中包括「滑動來關機」、「醫(yī)療急救卡」、「SOS 緊急聯(lián)絡」三個功能。
關機：先進入「SOS 緊急聯(lián)絡」再滑動來關機、設置-通用-關機
界面下移懸停？：從 iPhone X 相關代碼中看出 iPhone X 仍可開啟界面下移懸停功能，開啟方法可能是輕點（不按下）兩下側邊按鈕（由于側邊按鈕位于設備較上部，這樣操作似乎很費勁），僅供猜測??，待上市后驗證。
強制重啟：按下再快速松開調高音量按鈕，然后按下再快速松開調低音量按鈕，最后，按住側邊按鈕 10 秒。
進入恢復模式：將設備連接到電腦，打開 iTunes，按下再快速松開調高音量按鈕然后按下再快速松開調低音量按鈕，最后，按住側邊按鈕，直到看到恢復模式屏幕（連接 iTunes 的圖示）。
Face ID
在 iPhone X 中，F(xiàn)ace ID 替代了 Touch ID，這使得某些操作和體驗有了變化：
指紋的識別變成了面容的識別：
拿起手機喚醒屏幕，F(xiàn)ace ID 完成面容識別，同時從屏幕底部向上輕掃進入系統(tǒng)：
拿起手機喚醒屏幕，同時 Face ID 完成識別，系統(tǒng)顯示通知的具體內容（需要配合 iOS 11 中「設置」-「通知」-「信息」-「顯示預覽」選項-「解鎖時」）：
識別 Face ID 后，使用 Apple Pay 付款：
準確的定義授權方法：iPhone X 只支持 Face ID 授權，如果你的 app 使用了 Apple Pay 或者其他系統(tǒng)授權功能，不要在 iPhone X 上提及 Touch ID。與此相反，在只支持 Touch ID 的設備上不要提及 Face ID。
鍵盤
不要重復系統(tǒng)提供的鍵盤功能：在 iPhone X 上，Emoji 和 Globe 按鈕以及 Dictation 按鈕會在鍵盤的下方自動出現(xiàn)，即使用戶使用的是自定義鍵盤。你的 app 不能影響這些按鈕，也要避免在你的 app 的鍵盤中重復這些而造成困惑。
在 iPhone X 中，全字母鍵盤的高度由 216pt 增加到了 291pt，在設計文字輸入?yún)^(qū)域時要注意。
(圖片來源：UI 設計師需要知道的 iPhone X 細節(jié) – UXabc – Medium)
適配
App 的適配
大多數(shù)使用標準的、系統(tǒng)提供的 UI 元素（如 navigation bars、tables、collections）將會自動適配 iPhone X。背景將會延伸到屏幕的邊界，UI 元素將會被合適的插入和放置。比如 navigation bar 的背景色會自動延伸到 status bar 中，tab bar 、tool bar 會被合適的放置在 Home Indicator 上面，其背景色也會延伸到屏幕底端。
如果你的 app 使用了 Auto Layout，并且遵守了 Safe Area 和邊界的布局規(guī)范，即使是使用了自定義布局，適配 iPhone X 也很簡單。
要特別注意測試橫屏下的界面：大多數(shù)的適配問題可能都來自于橫屏界面。
對于沒有適配 iPhone X 的 app 在 iPhone X 中可能不能全屏顯示。在豎屏的情況下，頂部是 Status Bar，底部是 Home Indicator，中間部分以信箱 letterboxing 模式（即上下有黑條）顯示未適配的 app，顯示區(qū)域同 4.7 寸的 iPhone 8 一樣大小。
(圖片來源：How iOS Apps Adapt to the iPhone X Screen Size – Geoff Hackworth – Medium)
在橫屏的情況下，會以郵筒 pillarboxing 模式（即左右有黑條）顯示未適配的 app，同時屏幕底部會為 Home Indicator 留有一定的空間，整體上比 iPhone 8 的橫屏模式還稍微小一點。
（圖片來源：How iOS Apps Adapt to the iPhone X Screen Size – Geoff Hackworth – Medium）
從未適配的 app 在 iPhone X 上的顯示可以很明顯的看出，iPhone X 就是 4.7 寸的 iPhone 8 的拉長版，但是由于 iPhone X 使用的是 @3x 圖片資源，再加上 OLED 屏幕的加成，未適配的 app 看上去的視覺效果可能更像是在一部屏幕高配版 iPhone 8 上看。
從 iPhone 8 到 iPhone X 的過渡就如同當年從 iPhone 4s 到 iPhone 5 的過渡，可以預見在 iPhone X 上市初期會有眾多 app 還沒有來得及或還沒有找到合適的解決辦法適配 iPhone X，抑或正在適配的路上苦苦摸索，最先使用 iPhone X 的用戶在嘗鮮的同時也會有一段混合使用已適配 app 和未適配 app 的痛苦期。從 app 市場的現(xiàn)狀來看，對于一些緊密跟隨 iOS 新技術、由獨立開發(fā)者/小團隊開發(fā)、有一定用戶規(guī)模的 app （這類 app 反而會較多使用系統(tǒng)標準控件，響應用戶、跟進新特性也比較及時:sunglasses:）會較快適配 iPhone X，而對于一些邏輯復雜、牽一發(fā)而動全身、只追求能用不追求好用的 app（這類 app 使用系統(tǒng)標準控件較少，經(jīng)常出現(xiàn)一些自以為很炫酷但實際很反人類的交互，而且修改 bug、適配新特性還不積極??，如銀行 app、12306等），我們能做的只有慢慢等了。
注：點此查看 iDaily App 適配 iPhone X 后的效果圖（由于目前 iPhone X 還沒正式發(fā)售，Apple 暫不允許在 AppStore 中的 app 介紹中存在有關 iPhone X 的文字、圖片、視頻資源，已經(jīng)上架的純屬巧合，其實就是看 Apple 的心情:sleeping:）
雖然前期痛苦，但是隨著 iPhone X 用戶數(shù)的上升，市場和 Apple 都會推著開發(fā)者去適配 iPhone X。待適配大潮逐漸穩(wěn)定之后，那時候我們或許就能見到拉長版的 iPhone 8 Plus 了—— 名字該叫 iPhone X Plus 還是 iPhone XI Plus??？在這里大膽猜測下，拉長版的 iPhone 8 Plus 應該與 iPhone X 同一個屏幕比例，按照相對于 iPhone 8 Plus 寬不變高拉長的規(guī)律渲染分辨率應該是 1242px × 2689px，如果物理分辨率也是同樣的話，再加上傳聞的 6.4 寸屏幕，PPI 差不多是 463。等明年看看咯。
(圖片來源：iPhone X Plus to Be Released in 2018 Reports Suggest)
App 適配實例
以適配 WWDC app 為例，說明在適配過程中遇到的布局問題和如何修復它們。
WWDC app 的歷史已經(jīng)很長，好多工程師曾經(jīng)為它共享過代碼。在其中，它使用了許多標準控件和 Auto Layout，它也有很多自定義的 view，甚至更老的部分是完全手動布局的。
在 Xcode 9 中配置 WWDC app 的 Base SDK 為 iOS 11。如果你沒有看到 app 在 iPhone X 的屏幕上全屏顯示，請確保你配置了一個正確的 Launch Storyboard。
News tab：全屏的照片查看器中的 page control 離屏幕底部太近了，與 Home Indicator 跑到了一起。這是因為 page control 是根據(jù)其父視圖（也即整個屏幕）限定的底部的布局約束，我們需要根據(jù) Safe Area Layout Guide 對 page control 的底部做出布局上的約束。
在 xib 文件中打開 「Use Safe Area Layout Guides」（在 Xcode 9 之前創(chuàng)建的 xib 和 storyboard 不會自動打開此選項）。對于 iOS storyboard，打開這個選項后會自動把約束與屏幕的 top layout guide、bottom layout guide、leading edges、trailing edge 綁定，所以在開啟后需要仔細檢查確認 Auto Layout 的約束。
將 page control 的約束「Superview.Bottom = Page Control .Bottom」改為「Safe Area.Bottom = Page Control .Bottom」。
編譯并運行，可以看到 page control 無論在豎屏還是橫屏時均顯示正常。
Videos tab：進入搜索功能，與「通訊錄」app 對比后可以發(fā)現(xiàn) search bar 的背景顏色不對，其尺寸也有些問題。
當進入橫屏時，問題更加明顯。search field 和取消按鈕都被屏幕的圓角切割了。由此也看出 Safe Area 的重要性。
在 iOS 11 中，search bar 已經(jīng)與 navigation bar 整合在了一起，而不再是一個單獨的 UI search controller。在代碼中做出如下變動：
在 navigation bar 接管 search bar 之后，剩下的工作就交給 Safe Area 就好了。編譯并運行，可以看到 search bar 在豎屏與橫屏下都顯示正常了。
Schedule tab：與 Videos tab 有著同樣的問題，因為把 search bar 作為了 table view 的 header view，search bar 也有著同樣的顯示問題。只需像前面說的那樣，把 search bar 交給 navigation bar 來處理就好了。在橫屏時，如果仔細看會發(fā)現(xiàn)還有一個問題，table section 的背景顏色沒有延伸到屏幕的左右邊緣，這個顏色是我們設置的 header view 中的contenView的背景顏色。在除 iPhone X 以外的 iPhone 上這樣配置都是沒有問題的。
要想明白其中的原因，先來看下在 iPhone X 中 table view 的整體結構。從下圖中可以看到 content view 是默認被嵌入 Safe Area 的，而 table cell 本身是從屏幕一端到另一端的，這就是問題所在。
對于 content view 嵌入 Safe Area 這個行為是可以控制的，解除這個限制后 content view 就能從屏幕一端顯示到屏幕另一端。有一點需要注意，不管 content view 如何布局，其 layout margin 都是默認與 Safe Area 相關的。所以解決問題的一個辦法就是禁用 content view 嵌入 Safe Area 的行為，但這樣一來就會影響 content view 中的其他內容，也沒有辦法再使用這項挺有用的默認行為。
最好的的解決辦法就是設置 header 中 backgroundView 的 background color。
編譯并運行，可以看到 table view 的 header 的背景顏色已經(jīng)從屏幕的一邊延伸到了另一邊。
總結
基于 iOS 11 SDK 進行編譯，確保有正確的 Launch Storyboard；
在兩個屏幕方向都進行充足的測試，特別是橫屏情況下；
遵守 Safe Area：
Auto Layout 時使用safeAreaLayoutGuide
手動計算時使用safeAreaInsets
避免 app 中的內容與控件與系統(tǒng)的 Home Indicator 發(fā)生沖突。
網(wǎng)頁的適配
因為 iPhone X 的顯示屏的四個圓角、頂部的 Sensor Housing 特性，通過 Safari 打開的網(wǎng)頁，iOS 也進行了自動的特殊處理。
當設備處于豎屏情況下，網(wǎng)頁的顯示與其他設備沒有什么差別，相比 iPhone 8 就是縱向上能看到更多內容。
當設備處于橫屏情況下，為了確保網(wǎng)頁上的內容不被屏幕圓角、Sensor Housing 遮擋，所有內容、控件會被限制在 Safe Area 中顯示，而 Safe Area 左右兩側會被頁面的background-color(比如為或元素指定的背景顏色)填充。通常情況下我們看到的網(wǎng)頁背景顏色都是白色，例如下圖中在 iPhone X 的 Safari 中打開的 Medium 官網(wǎng)， 背景顏色是白色，整體上除了白色基本就是黑色的文字，這樣看上去效果還不錯。
再舉一個例子，下圖中在 iPhone X 的 Safari 中打開 Apple 官網(wǎng)，同樣的頁面背景色為白色，但由于橫跨整個頁面的灰色導航欄和非白色背景的近乎全屏的圖片的存在，左右兩邊的白邊看上去比較突兀，整體效果比較奇怪。
iPhone X 的屏幕比例約為 9:19.5，不再是之前常見的 9:16，這對于靠「等比縮放」完成適配的 HTML5 活動頁面來說，需要針對 iPhone X 調整頁面布局結構。
(圖片來源：三分鐘弄懂iPhone X 設計尺寸和適配|UI|教程|海邊來的設計師 - 原創(chuàng)文章 - 站酷 (ZCOOL))
網(wǎng)頁適配實例
下面這個網(wǎng)頁，網(wǎng)頁的背景顏色不是白色，整個頁面背景色延伸到了屏幕邊緣，但橫跨整個頁面寬度的上下兩個導航欄被限制在了 Safe Area 中，視覺上看上去很奇怪。底部的導航欄還與 Home Indicator 發(fā)生了重疊，這會導致按鈕很難點擊。這樣的網(wǎng)頁就需要針對 iPhone X 進行調整。
一些必要的調整（由于不熟悉前端網(wǎng)頁開發(fā)的一些具體實現(xiàn)，只在此說一下大概的原理）
橫屏狀態(tài)下，iPhone X 的 Safari 中默認沒有讓內容和控件充滿整個屏幕。要想使用整個屏幕，需要在 iOS 11 中改變viewport-fit的值以關閉自動嵌入行為。改變后的網(wǎng)頁顯示如下圖，雖然導航欄可以從屏幕一個邊緣延伸到了另一邊緣，但是這時內容和控件會被屏幕的圓角以及 Sensor Housing 遮擋。
想要既要利用整個屏幕，又要服從 Safe Area，需要給不想被遮擋的重要內容加上一個 padding。iOS 11 的 Webkit 預定義了Safe Area 上下左右四個方向的邊距常量，利用此為頁面上的元素添加 padding 后網(wǎng)頁上的重要內容就可以正常顯示，更改后網(wǎng)頁橫屏下的效果圖如下。
iPhone X 在橫屏下的 Safe Area 左右兩邊的間距都是 44pt，但是在豎屏下 Safe Area 左右兩邊的間距是 0pt。故通過上面的 padding 設置后，在豎屏下，頁面會出現(xiàn)一些問題，文字內容會緊貼屏幕的左邊緣。豎屏時對于這里的期望是文字能與屏幕左邊緣有一些間距（比如 12px），要實現(xiàn)此，可以將文字部分的 padding-left 設置為取 12px 和 Safa Area 左邊間距兩者中較大的那個值，這樣在橫屏時 padding-left 即為 Safa Area 的左邊距，在豎屏時 padding-left 即為 12px。（取較大值的這個特性將在以后版本的 iOS 11 中發(fā)布）
最終通過一系列的調整，豎屏下的頁面效果如下圖。
前后整體框架對比：
(圖片來源：Design+Code - Learn to design and code for iOS 11)
iOS 11 常用 UI 標準控件的尺寸對照
對于不同設備，在橫向和縱向時的 Size Class 是不同的。加之 iPhone X 引入 Sensor Housing 和 Home Indicator 造成的一些特殊性，這就使得在不同的 iPhone 上 UI 標準控件有著不同的尺寸。以下列出了三款典型 iPhone 的常見 iOS11 UI 標準控件的尺寸。
iPhone 8
iPhone 8 的 Size Class：豎屏時——Compact width, Regular height，橫屏時——Compact width, Compact height。
Status bar：20pt（電話、錄音、位置記錄時會變?yōu)?40pt）
豎屏 navigation bar（包括 status bar）：64（20+44）pt，豎屏下如果有 big title 就再加 52pt
豎屏 tab bar：49pt（豎屏下每個 tab：48pt × 49pt）
豎屏 toolbar：44pt
橫屏 navigation bar、tool bar、tab bar：32pt
Glyph：28pt × 28pt
左右建議 Margin：豎屏時 16pt，橫屏時 20pt
iPhone 8 Plus
iPhone 8 Plus 的 Size Class：豎屏時——Compact width, Regular height，橫屏時——Regular width, Compact height。
Status bar：20pt（電話、錄音、位置記錄時會變?yōu)?40pt）
橫豎屏 navigation bar（包括 status bar）：64（20+44）pt，豎屏下如果有 big title 就再加 52pt
橫豎屏 tab bar：49pt（豎屏下每個 tab：48pt × 49pt）
橫豎屏 toolbar：44pt
Glyph：28pt × 28pt
左右建議 Margin：豎屏時 16pt，橫屏時 20pt
iPhone X
iPhone X 的 Size Class：豎屏時——Compact width, Regular height，橫屏時——Compact width, Compact height。
Status bar：44pt（電話、錄音、位置記錄時不變）
豎屏 navigation bar（包括 status bar）：88（44+44）pt，如果有 big title 就再加 52pt
豎屏 tab bar：49pt（每個 tab：48pt × 49pt）
豎屏 toolbar：49pt
橫屏 navigation bar、tool bar、tab bar：32pt
Glyph：28pt × 28pt
Home Indictor Area：豎屏時 34pt，橫屏時 21pt
左右建議 Margin：豎屏時到 Safe Area 左右兩邊 16pt，橫屏時到 Safe Area 左右兩邊 20pt
（圖片來源：Design+Code - Learn to design and code for iOS 11）
（圖片來源：Design+Code - Learn to design and code for iOS 11，圖片有改動。關于 iPhone X 橫屏下，tab bar 和 Home Indicator 區(qū)域經(jīng)過查找資料我認為應該分別是 32pt 和 21pt，而不是原文中的 30pt 和 23pt。）
文章轉載自互聯(lián)網(wǎng)，如有侵權，請聯(lián)系刪除。
