【官方】APICloud APP 關(guān)于 iPhoneX 的屏幕適配

作者：APICloud-Kenny

由于iPhone X的特殊造型，為了方便開發(fā)者對iPhone X進(jìn)行適配，蘋果在iOS 11中引入了Safe Area的概念，引擎也在api對象下添加了safeArea屬性和safeareachanged事件，UI設(shè)計準(zhǔn)則是頁面重要的元素需要在安全區(qū)域以內(nèi)，避免被遮擋。

對于大多數(shù)應(yīng)用，通過以下幾步基本就可以完成iPhone X的適配，其它的特殊情況如橫豎屏切換等則需要結(jié)合使用場景另外處理。

注：如果沒有iPhone X真機，有需求的開發(fā)者可以到這里下載iOS的模塊開發(fā)工程，使用Xcode9及更高版本將項目運行在iPhone X模擬器上面調(diào)試。

一、上傳iPhone X啟動圖

進(jìn)入控制臺端設(shè)置，上傳iPhone X啟動圖，圖片尺寸為1125*2436，運行效果如圖：

二、解決頂部header被遮擋

由于iPhone X頂部的特殊形狀，狀態(tài)欄高度不再是以前的20px，而是變成了44px，如果應(yīng)用開啟了沉浸式效果，那么頁面頂部會被遮住部分，如圖：

找到api.js中的fixIos7Bar、fixStatusBar方法，用以下代碼替換即可。

u.fixIos7Bar = function(el){ return u.fixStatusBar(el); }; u.fixStatusBar = function(el){ if(!u.isElement(el)){ console.warn('$api.fixStatusBar Function need el param, el param must be DOM Element'); return 0; } el.style.paddingTop = api.safeArea.top + 'px'; return el.offsetHeight; };

修改過后的頂部效果如圖：

三、解決底部標(biāo)簽欄被虛擬home鍵遮擋

由上面的圖可以看到，頁面底部的標(biāo)簽欄也被虛擬home鍵遮擋住了部分。對于虛擬home鍵，可以通過openWin和setWinAttr方法的hideHomeIndicator參數(shù)來控制顯示隱藏，這對于沉浸式體驗較高的場景很有用（比如觀看視頻）。而一般的頁面通常的做法是避開虛擬home鍵，這里參考header的處理，我們在api.js中添加一個fixTabBar方法：

u.fixTabBar = function(el){ if(!u.isElement(el)){ console.warn('$api.fixTabBar Function need el param, el param must be DOM Element'); return 0; } el.style.paddingBottom = api.safeArea.bottom + 'px'; return el.offsetHeight; }

然后在需要的地方進(jìn)行調(diào)用：$api.fixTabBar($api.byId('footer'))，修改后的效果如圖：