本文主要介紹我們的知識小集小程式在適配 iPhone X 螢幕時遇到的一些問題以及總結，希望對你的小程式開發能有所幫助。
iPhone X 螢幕資料
在去年 9 月份 iPhone X 正式釋出後，引發了一波 iOS App 適配 iPhone X 的熱潮和技術文章，詳情可以參考掘金技術社群的這個專題：《iPhone X 適配實踐》
我們這裡先簡單總結一下 iPhone X 螢幕的基礎資料，方便後續在小程式開發中進行適配。
-
螢幕尺寸：5.8 英寸（對角線）
-
螢幕物理解析度：1125px × 2436px，458 ppi
-
實際開發適配尺寸：375pt × 812pt，@3x
此外，由於在 iPhone X 螢幕頂部狀態列區域有“齊劉海”，以及在螢幕底部增加了“操作條”，如下圖所示，因此，我們在開發中需要注意安全區域的問題。
根據蘋果官方的文件，iPhone X 頂部狀態列的適配安全區域的高度為 44pt，底部操作條區域的高度為 34pt。另外，在 iPhone X 中，一些系統 Bar 的預設高度相比於之前的裝置也發生了變化，如下表所示。
所以在 iOS App 開發中，如果我們使用系統預設的 UINavigationController 和 UITabBarController 時，則無需額外的適配工作，iOS 系統會自動適配好相關 Bar 的安全區域問題。如果我們使用了自定義的導航欄和標籤欄，則需要注意根據裝置型別區分設定這些 Bar 的不同高度。
小程式的尺寸單位
為了解決不同螢幕尺寸的適配問題，小程式自己定了一個尺寸單位：rpx（responsive pixel），它可以根據螢幕寬度進行自適應。小程式中規定，所有裝置的螢幕寬度都為 750rpx，根據裝置螢幕實際寬度的不同，1rpx 所代表的實際畫素值也不一樣。
根據微信開發文件，在 4.7 英寸的 iPhone 裝置上（iPhone 6/7/8），螢幕寬度為 375px（此處應該理解為 375 point），共有 750 個物理畫素，則 750rpx = 375px = 750 物理畫素，1rpx = 0.5px = 1物理畫素。
小程式中如何判斷裝置為 iPhone X
上面我們簡要介紹了 iPhone X 的螢幕資料和小程式中的尺寸單位作為鋪墊，現在終於要切入正題了，要在小程式中適配 iPhone X 螢幕，首先我們需要知道如何判斷裝置型別。
微信的小程式 API 中提供了一個 wx.getSystemInfo(OBJECT) 方法用於獲取使用者手機的系統資訊和裝置資訊，包含如下資料：
上述每個欄位的含義詳見文件，我們不再一一贅述。
因此，我們可以根據該方法返回的手機型號欄位 model 是否包含 iPhone X 字串來判斷裝置是否為 iPhone X，也可以根據 screenHeight 的高度是否等於 812 來判斷。
NOTE: 這裡有一個小坑需要注意，在微信開發者工具中的模擬器，如果選擇為 iPhone X，此時獲取到的 model 值為 iPhone X，導致我以為真機也是這個值，於是直接用 if (model == `iPhone X`) 來判斷，但其實真機下 model 的值為這種格式： iPhone X (GSM+CDMA)<iPhone10,3>，因此我們需要用字串檢索匹配進行判斷。
綜上，我們可以在 app.js 的 globalData 中新增一個欄位 isIPX 用於標識當前裝置是否為 iPhone X，然後在小程式啟動時 onLaunch 中呼叫 wx.getSystemInfo(OBJECT) 方法並在其 success 回撥中讀取 model 欄位進行分析，程式碼大致如下：
App({
// 全域性資料
globalData: {
// 其他資料定義 ...
isIPX: false, // 當前裝置是否為 iPhone X
},
// 小程式啟動入口
onLaunch: function (options) {
// 其他啟動程式碼...
// 判斷裝置是否為 iPhone X
this.checkIsIPhoneX()
},
checkIsIPhoneX: function() {
const self = this
wx.getSystemInfo({
success: function (res) {
// 根據 model 進行判斷
if (res.model.search(`iPhone X`) != -1) {
self.globalData.isIPX = true
}
// 或者根據 screenHeight 進行判斷
// if (res.screenHeight == 812) {
// self.globalData.isIPX = true
// }
}
})
},
複製程式碼如果需要小程式啟動時立即獲取裝置相關資訊，也可以調 wx.getSystemInfoSync() 方法，它會同步獲取資料並立即返回。
頁面適配實戰
在小程式頁面開發中，涉及到需要適配 iPhone X 的地方主要有：導航欄（NavigationBar），標籤欄（TabBar）以及頁面底部的吸底按鈕。
- 導航欄和標籤欄適配
如果我們使用微信小程式官方元件進行開發，沒有進行自定義，在 app.json 檔案中設定 tabBar 頁面，且 window 的 navigationStyle 值為 default，那麼我們無需在 iPhone X 中對導航欄和標籤欄進行適配，微信會自動幫我們適配好，如下圖為知識小集小程式的首頁：
但是我們如果是自定義導航欄（在 app.json 檔案中設定 window 的 navigationStyle 為 custom，此時只保留右上角膠囊狀的按鈕，需要開發者自己畫導航欄樣式）和標籤欄，則我們需要在每個頁面中判斷裝置型別，並針對 iPhone X 螢幕在安全區域內進行佈局，然後修改相關 Bar 的高度值（見上述表格）。
以自定義導航欄適配為例，步驟如下：
（1）在每個頁面的 page.js 中先讀取 app.js 中的 isIPX 值，如下：
const app = getApp()
Page({
data: {
// 頁面其他資料...
isIPX: app.globalData.isIPX,
},
// 其他程式碼
複製程式碼（2）然後在 page.wxss 樣式檔案中對某一個檢視 View 分別為普通螢幕和 iPhone X 螢幕寫兩種樣式，如下：
.navi-bar-view {
height: 64px;
/* 其他樣式值 */
}
.navi-bar-view-IPX {
height: 88px;
/* 其他樣式值 */
}
複製程式碼（3）最後在 page.wxml 頁面結構佈局中根據 isIPX 的值給 View 設定不同的 class 樣式，如下：
<view class="{{isIPX ? `navi-bar-view-IPX` : `navi-bar-view`}}">
</view>
複製程式碼此外，對於自定義導航欄和標籤欄，我建議還是要遵循 iPhone UI 的設計規範，樣式可以參考蘋果官方的渲染圖：
- 吸底按鈕適配
在小程式頁面中，吸底按鈕是很常見的一種設計，我們一般會把一些重要的按鈕放在頁面底部懸浮不動，例如我們知識小集小程式的“小集詳情頁”底部的“收藏”和“轉發”按鈕：
在 iPhone X 中我們需要把吸底按鈕往上偏移 34 畫素，可通過在 CSS 樣式中設定 padding-bottom 為 34px 實現，參考程式碼如下：
.feed-bottom-view {
width: 100%;
height: 48px; /* 吸底按鈕的高度 */
bottom: 0;
opacity: 0.95;
position: fixed;
border-top-style: solid;
border-top-width: 0.5px; /* 分割線的高度 */
border-color: lightgrey;
background-color: #F8F8F8;
}
.feed-bottom-view-IPX {
/* iPhone X 內容往上偏移 34px */
padding-bottom: 34px;
}
複製程式碼<view class="{{isIPX ? `feed-bottom-view feed-bottom-view-IPX` : `feed-bottom-view`}}">
<!-- 底部吸底按區域 -->
</view>
複製程式碼**備註：**如前面所述，對於不同裝置寬度，1rpx 所代表的實際畫素值也不一樣，而在不同尺寸的 iPhone 裝置（3.5/4.0/4.7/5.5 英寸）中，雖然它們的寬度不同，但其導航欄+狀態列的高度都為 64pt（iPhone X 為 88pt），標籤欄 TabBar 的高度都為 49pt（iPhone X 為 83pt）。所以在小程式開發中，當我們需要自定義導航欄、標籤欄，或者適配 iPhone X 頂部和底部安全區域時，我建議此處的單位直接使用 px（在小程式中對應 iOS 開發中的點 pt）而不使用 rpx（當然頁面的其他元素的尺寸描述還是推薦使用 rpx），以確保最終渲染顯示的高度與 iOS 系統預設的一致。
總結
本文簡要介紹了在小程式開發中如何適配 iPhone X 螢幕，更多細節請查閱我們在 GitHub 上開源的知識小集小程式的程式碼：awesome-tips-wx-app
關注我們
歡迎關注我們的公眾號：iOS-Tips，也歡迎加入我們的群組討論問題。可以公眾號留言 ios、flutter、web、pwa、小程式 等關鍵詞獲取入群方式。
推薦閱讀