今年蘋果發佈了2款iPhone，iPhone 8和iPhone X。
iPhone8在本次升級中，屏幕尺寸和分辨率都遺傳了iPhone6以後的優良傳統；然而iPhone X 無論是在屏幕尺寸、分辨率、甚至是形狀上都發生了較大的改變，這就給開發者在適配iPhone X上帶來一些困擾。為了解決廣大開發者在適配期間遇到的問題，iUapMobile移動平臺在第一時間對iPhone X進行了適配。
Summer對於iPhone X的適配
經過一段時間的探索，我們針對移動平臺的特點，提供了不同類型Window給開發者使用。
其中使用原生導航的Window類型（type類型為actionBar和tabbar），導航欄部分不需要開發者考慮佈局問題，這也是我們推薦開發者使用的Window類型。如下圖所示：
對於導航欄部分，summer框架幫開發者處理佈局，底部虛擬home鍵部分，summer框架也自動留出了34px高度。開發者只需關心中間的H5部分即可。
而對於不使用原生導航欄的Window類型，summer框架也會自動幫開發者適配SafeArea，包括頂部44px和底部的34px高度。
佈局的適配
首先對於啟動圖，要專門針對iPhone X提供1125*2436尺寸的啟動圖（@3x），在項目設置裡面直接用LaunchScreen.xib或者LaunchScreen.storyboard進行配置啟動圖。
適配前後如下列兩圖所示：
關於“劉海”和虛擬Home鍵
蘋果官方文檔給出了說明：
為了讓你的應用在 iPhone X上 面完美運行，你需要將可視元素擴展至填充整個展示窗口（屏幕）上，同時，你也需要保證如按鈕、Tab Bar 等可交互控件，以及一些至關重要的信息不會因為屏幕的圓角而被裁掉，或者被手機的“劉海”和虛擬“Home鍵”遮住。
①屏幕頂部，俗稱“劉海”，即StatusBar部分，高度44px，這條狀態欄本來並沒有可發揮的空間，但是iphone的StatusBar與NavigationBar背景是可以通欄的，以達到一種完全沉浸式體驗的設計。
②屏幕底部的虛擬區，替代了home鍵，高度為34px.指示燈區域是一個帶著系統功能的內容顯示區域，這就意味著它可以展示你內容；同時如果你的底部是TabBar，那麼指示燈區域背景會來自於TabBar背景的延伸；如果我們是一個feed流的頁面，底部則會展示次屏feed流的局部。
鑑於圓角、傳感器、指示燈區域的影響，iPhone X給出了設計佈局的安全區意見，即SafeArea。
關於SafeArea
在蘋果的官方文檔中，對SafeArea描述為：
所有的應用應該附著於安全區域和 UIKit 定義的邊距中，這可以讓應用在各種設備或者橫豎屏情況下有正確的佈局。同時，安全區域可以保證頁面的內容不會和狀態條、導航條、工具條或者底部導航重疊。
①Auto Layout with Safe Area
iOS11中，蘋果推出了SafeAreaLayoutGuide取代了bottomLayoutGuide和topLayoutGuide。
使用AutoLayout，適配SafeArea比較簡單。打開一個Storyboard，會發現視圖層次中多了一個Safe Area。
So，使用 Auto Layout 佈局的話，safe area 就相對於一個處於每個 view controller 中處於視圖層級底層的容器，我們的子控件只需要和它建立約束關係，就可以完美適配 iPhone X 安全區域。
②Programming with Safe Area
使用代碼進行佈局，對於SafeArea稍稍複雜一些。iOS 11中，UIView的新API SafeAreaInsets和UIViewController的新API additionalSafeAreaInsets可以解決代碼佈局的適配問題。
additionalSafeAreaInsets這個API提供給開發人員能夠自主擴展SafeArea區域的能力。也就是說，對這個屬性主動賦值，整個視圖的SafeArea就會發生變化。
需要注意的是，在不同狀態，例如豎屏和橫屏下，獲取到的SafeAreaInsets是不同的，對於ViewController來說，大概符合以下規則：
另外，SafeAreaInsets並不是隨時都能獲取到。Apple的官方解釋是在視圖顯示在屏幕上或者裝在到一個視圖層級中的時候，才能正確獲取到SafeAreaInsets，否則返回0。
·屏幕尺寸
我們熟知的iPhone系列開發尺寸如下：
轉化成像素尺寸：
下面以iPhone 8作為參照物，看看到底iPhone X的適配如何進行。
開發尺寸上可以發現X和8的寬度一致，然而在垂直方向上多了145 pt，這就意味著首屏可以展示更多的內容，多出20％的垂直空間。
從整體設計尺寸看：iPhone 8的像素尺寸是750*1334 px（@2X），而iPhone X的像素尺寸是1125*2436 px（@3X），同樣的寬度 一個用@2X圖，一個用@3X圖，表現出了更高的清晰度。
希望以上的內容能夠給平臺的開發者們帶來一些幫助！
閱讀更多 用友雲平臺 的文章
