轉自：http://www.cnblogs.com/youran/p/7593213.html

iPhone X適配分析——

被iPhone X刷了一天屏，到下午實在受不了各種假帖。標題寫著“iPhone X 適配、指南、設計稿” 內容卻是釋出會回顧和手機介紹。索性自己去官網找素材寫一篇只針對iPhone X適配的貼子，與設計圖無關的內容通通不提……

昨夜釋出的iPhone 8屬於常規升級，螢幕與以往的iPhone6、6S、7系列相同。在昨天釋出的新機中，只有iPhone X的解析度發生了變化，但變化僅限於物理畫素層面。在真正決定螢幕內容的邏輯畫素層面，新版的iPhone X與過去我們熟知的iPhone 4.7''、iPhone 5.5'' 放大模式寬度相同。

然而，事情並不是設計圖加長這麼簡單。

過去，我們拿到的手機是方方正正的矩形，所以整個螢幕都可以看做是安全區域Safe Area，而如今由於iPhone X螢幕上的“劉海”以及螢幕四周採用圓角的設計，需要設計師對繪圖區域做出調整。

蘋果給出的安全區域如下：

頁面內容不能超出安全區域（Safe Area）。

避免將觸發互動行為的按鈕放在螢幕的底部，人們會在螢幕底端使用手勢進入主屏或切換應用。（底部橫條是Home鍵）

頁面頂部和底部變化如下：

右上圖可以看到為了迴避“劉海”和圓角，iPhone X的頂部狀態列和底部選單欄都進行了增高。

值得注意的是，iPhone X 底部操作欄目進行了細微的放大。除了常見的底部導航欄外，Safari底部操作欄也有放大。

講完豎屏，再說橫屏。

和豎屏一樣，橫屏的內容也要放置在Safe Area中。

避免將觸發互動行為的按鈕放在螢幕的角落中。人們會在螢幕底端使用手勢進入主屏或切換應用。這些系統的全域性操作優先於App的操作。如果把功能放在角落裡，使用者操作起來也很費勁，儘量在使用者手指可及區域內設計功能。

最後說下最核心的問題，Safe Area 範圍有多大？

下午我比對了官網上所有與iPhone X相關的介面，可以確定，Safe Area區間如下：

對於習慣用750x1334作圖的設計師而言，iPhone X的到來並不會帶來太大影響，iPhone X與iPhone 4.7’’之間的差異甚至不及當年iPhone 4和iPhone 5之間的差異。

iPhone 4.7 與iPhone X 的Safe Area高度僅相差67 Point（134 px，@2x）

對於大多數採用瀑布流的頁面來說，僅僅是螢幕高度上的變化，可以無視。但對於如：新手引導頁、音樂播放器等需要單屏顯示的介面就需要重新佈局。

由於 iPhone X的螢幕比例發生變化，對於長期靠“等比縮放”完成適配的H5活動頁而言也有不小的影響，需要對頁面結構進行適當微調。

最後，如果應用程式需要隱藏狀態列，請重新考慮iPhone X上的佈局。iPhone X的顯示高度相對於iPhone 4.7''提供了更多的內容高度，狀態列和底部可以帶來更多的空間。但需要就螢幕內容進行適當的調整。

如果不是特別需要沉浸式體驗的介面，如視訊、看圖片，建議不要隱藏狀態列。