Web App適配iPhoneX

前言

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

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

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

適配后效果

適配步驟如下

更新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: constant(safe-area-inset-top);
  padding-bottom: constant(safe-area-inset-bottom);
}

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