https://blog.csdn.net/fzhlee/article/details/78037474

（原標(biāo)題：面對(duì)iPhone X劉海現(xiàn)實(shí)，看看全世界的開發(fā)者怎么適配）

原創(chuàng)curator

北京時(shí)間9月12日凌晨，蘋果在喬布斯劇院發(fā)布了iPhone X，主打全面屏的iPhone X取消了Touch ID，代之以Face ID。

為了實(shí)現(xiàn)更為安全的面部識(shí)別，iPhone X正面的全面屏上方有一條劉海，上面集成了紅外（深度）攝像頭、近距離傳感器、環(huán)境光傳感器、左/上揚(yáng)聲器、麥克風(fēng)、前置攝像頭和一個(gè)名為點(diǎn)狀投射儀 (Dot projector)的元件。

它會(huì)投影數(shù)千個(gè)看不到的點(diǎn)在你臉上，對(duì)你的臉繪制一幅三維的深度“臉圖”，然后和系統(tǒng)記錄的臉圖進(jìn)行比對(duì)。

對(duì)于開發(fā)這來說，這些都不重要！！重要的是：

這個(gè)屏幕上的劉海究竟要怎么適配呀！！！

哦，不過這篇文章并不是為了吐槽這個(gè)點(diǎn)的。畢竟再怎么吐槽，再過一個(gè)多月iPhone X就要發(fā)貨了，不管怎樣最終還是要面對(duì)現(xiàn)實(shí)。

經(jīng)過了一段時(shí)間的沉淀，全世界的開發(fā)者們似乎已經(jīng)找到了幾種適配iPhone X劉海全面屏的方法。

首先是縱向上的問題：

縱向上主要是頂部的導(dǎo)航欄、狀態(tài)欄和底部TabBar的問題。

iPhone X開發(fā)尺寸與iPhone 8的寬度一致，在垂直方向上多了145 pt，這就意味著多出20%的垂直空間， APP可以展示更多的內(nèi)容。

但是多出來的145 pt并不是方方正正的矩形，而是被劉海切割成了異形區(qū)域。

于是就有人嘗試，既然蘋果沒有把劉海做齊，那通過軟件把劉海兩側(cè)的空白填上不就可以了嘛。

這樣是不是就順眼多了？“Ears”的名稱也很貼切吧。

然而蘋果的“Human Interface Guidelines”明確禁止了這種做法。

蘋果規(guī)定：注意內(nèi)容不要被裁切，建議內(nèi)容為居中對(duì)稱已不被圓角或傳感器等遮擋，也建議使用系統(tǒng)提供的的元素以及自動(dòng)布局來構(gòu)建頁面獲得更好的適配效果。

注意StatusBar的高度，iPhone X的狀態(tài)欄高度會(huì)更高，如果有開發(fā)者對(duì)NavgationBar的位置是通過固定值進(jìn)行位置的定位的，建議升級(jí)App。

而且如果?App是隱藏StatusBar的，蘋果建議開發(fā)者重新考慮，iPhone X為用戶在垂直空間上提供了更多展示空間，且狀態(tài)欄中也包含了用戶需要知道的信息，除非能通過隱藏狀態(tài)欄帶給用戶額外的價(jià)值，否則蘋果建議將狀態(tài)欄還給用戶。

蘋果給出了iPhone X設(shè)計(jì)布局的安全區(qū)意見是這樣的：

也就是說，開發(fā)者還要保證設(shè)計(jì)布局能夠填充整個(gè)屏幕，而核心內(nèi)容又不能被設(shè)備的大圓角、傳感器(齊劉海)、以及底部的Home Indicator遮擋。

如果沒有適配iPhone X，就會(huì)變成這樣的：

圖片來源：奇點(diǎn)開發(fā)者@圖拉鼎（注：新版奇點(diǎn)已適配）

另一款成功適配的APP效果圖是這樣的：

圖片來源：四葉新媒體聯(lián)合創(chuàng)始人微博@Saic

當(dāng)然，比起縱向的問題，橫向的適配問題更大，槽點(diǎn)也更多。

首先是蘋果iOS自帶的Safari在橫屏狀態(tài)下網(wǎng)頁兩側(cè)會(huì)填充一定的空白，就變成了這樣的：

與此對(duì)應(yīng)，蘋果給出的橫屏狀態(tài)下的安全區(qū)域是這樣的：

好吧，既然要加載空白區(qū)域，那滾動(dòng)的時(shí)候滾動(dòng)條該怎么“優(yōu)雅”的穿過劉海？

蘋果的Safari滾動(dòng)條在橫屏狀態(tài)下穿過劉海的時(shí)候變成貪吃蛇了？

還有這樣的：

當(dāng)然，這些都是蘋果不允許的。

還有開發(fā)者把功能鍵的彈出放在了劉海那一側(cè)，由于也是黑色的背景，看起來更有一體感了：

圖片來源Twitter: 0therPlanet

而橫屏打游戲的時(shí)候，操作界面被劉海遮擋。所以操作功能鍵需要放在蘋果建議的安全區(qū)域，其他的背景圖用來填充空白。

也就是說，按照蘋果的開發(fā)指南，無論橫屏還是豎屏，要適配iPhone X這樣有劉海的屏幕，除了審美需（被）要（迫）提（適）高（應(yīng)），APP重要的功能鍵、TabBar等需要放在蘋果建議的安全區(qū)域內(nèi)，其他的地方用APP背景頁或者狀態(tài)欄填充。

而如果想把男女朋友的照片設(shè)為鎖屏壁紙的話，需要找一張人物稍微“居中”或者“居下”的照片（拍照的時(shí)候人物主體在畫面下方），否則就會(huì)變成了這樣：

還有一些需要我們的審美去適應(yīng)（無解）的情況，尤其是全屏模式下瀏覽照片、看視頻以及Safari閱讀模式。

比如這樣的：

圖片來源：微博@Jonny

iPhone X劉海里的Face ID雖然很強(qiáng)大，但是這樣的異形屏真是難為開發(fā)者和用戶了。

哦，對(duì)了關(guān)于開頭那個(gè)王者榮耀的吐槽，中關(guān)村在線的評(píng)測(cè)已經(jīng)給出了答案。騰訊官方的適配方法是這樣的：

本文來源：PingWest品玩
責(zé)任編輯：白鑫_NT4464

總結(jié)

以上是生活随笔為你收集整理的全球开发者各出奇招：我们想这样适配iPhone X的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。