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項目應該就已經適配好了