cordova項目適配iPhoneX

iPhoneX適配踩坑淺談

Apple每次退出新尺寸的iphone都會掀起一番適配風波,此次沒有下巴但有劉海的iPhoneX更是如此,網傳橫屏下的適配動畫更是令很多人汗顏.

其實對於Native App來講,適配並不算困難(固然追求酷炫效果另算),官方文檔有詳細的說明,而對於Web App來講,主要仍是依靠打開webview的Native App來適配,而這篇文章主要討論的是Cordova App要如何適配iPhoneX.

ps: 本文用到的項目模板來自 centrual/cordova-template-framework7-vue-webpack
全部設配作出的改動都放到了我fork的 funkyLover/cordova-template-framework7-vue-webpack上

先上一開始沒有適配的效果(下面截圖均來自模擬器)

適配後效果

適配步驟以下

更新cordova插件

首先確認使用的cordova插件有是否包含針對iPhone X的release,例如cordova-plugin-splashscreen, cordova-plugin-statusbar等,而我是用的項目模板的插件版本恰好沒有出什麼問題,因此我也沒有深究具體須要更新到哪些版本.

而若是使用的是Meteor來打包生成Cordova應用的話,則須要更新Meteor到1.6,而以後運行Meteor也會提醒須要更新哪些插件.

更新啓動圖

這對Native適配很是簡單,就加一張圖片就行了.對於Cordova也沒費多大的事,修改一下config.xml關於ios啓動圖配置的部分

<platform name="ios">
  <!-- 這裏只加了針對iphone x的尺寸 1125 * 2436 -->
  <splash height="2436" src="res/screen/ios/qidong.png" width="1125" />
</platform>

更新HTML viewport meta

這裏的改動主要是添加viewport-fit=cover,其餘部分能夠算是Web App的標準配置了.

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">

更新CSS

完成上面的配置以後,如今的顯示效果應該是這樣的

其實離咱們的最終效果已經很近了,觀察頁面就大概知道是頁面的頂部往上頂了,其實上面多出來的區域是iPhoneX特有的,蘋果稱之爲安全區(看對比圖三和圖二的區別能夠看出,上面都有所謂的安全區).

咱們要作的其實就是讓頁面佈局在安全區(Safe Area)以外的地方.聰明的小夥伴確定已經想到了,對頁面加個padding-top就能夠,可是這個padding值是多少呢?確定不會hardcode某個具體數值的.對此蘋果提供了safe-area-inset-top和safe-area-inset-bottom可用於css來設定具體的安全區域.

// 前兩個css規則主要用於完善framework7(模板項目使用UI庫),不必定適用其餘項目
html, body {
  height: 100%;
  overflow: hidden;
  // box-sizing取決於安全區的padding是加在哪一個元素上
  box-sizing: border-box;
}
html.with-statusbar-overlay .framework7-root {
  padding-top: 0;
}

// 主要起效是這裏,固然也不必定是加在body上
body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

到這裏,Cordova項目應該就已經適配好了

PS

畢竟技術是一直在進步(改變)的,可能到你看到這邊文章的時候,我上面的方法又不必定適用了,可是總體思路已經給出,若是再有問題能夠根據我文中的描述去搜索,也感謝在評論區貼出新的兼容問題解決方案的小夥伴

如下補充下@神祕博士 發現並解決的問題

- @神祕博士
的確仍是有問題，ios11.2 +最新的 xcode9.2，若是你用的是 UIWebview，即便設置了viewport-fit="cover"，即便使用了 Launch Storyboard Image啓動圖，仍然有上下的白邊。

最根本的解決方法是使用 cordova-plugin-wkwebview-engine，可是WkWebview啓動的index.html不能訪問http/https請求，須要結合cordova-plugin-wkwebview-file-xhr，此插件是oracle開發，攔截全部wkwebview請求，利用原生的方式請求http/https（默認只攔截https，若是須要攔截http，須要config.xml中配置 <preference name="InterceptRemoteRequests" value="all" />）。

還有，模擬器下的wkwebview是能夠顯示file://路徑的本地圖片文件的，可是真機下只能顯示 Tmp 目錄下的圖片文件，因此若是你有下載、顯示本地圖片的，須要更換文件目錄爲 Tmp目錄。

注：Tmp 目錄是 file:///var/mobile/Containers/Data/Applications/<GUID of app>/tmp/
用 cordova.file.tempDirectory 常量能夠獲得這個目錄