移動端和微信小程式對 iPhone X 適配
一、 安全區域(safe area)
與iPhone6/6s/7/8相比，iPhone X 無論是在螢幕尺寸、解析度、甚至是形狀上都發生了較大的改變，下面以iPhone 8作為參照物，先看看iPhone X尺寸上的變化：
蘋果對於 iPhone X 的設計佈局意見如下：
核心內容應該處於 Safe area 確保不會被裝置圓角(corners)，感測器外殼(sensor housing，齊劉海) 以及底部的 Home Indicator 遮擋。也就是說 我們設計顯示的內容應該儘可能的在安全區域內；
1、viewport-fit的meta標籤作為適配方案；viewport-fit的預設值是auto。
viewport-fit取值如下：
| auto | 預設：viewprot-fit:contain;頁面內容顯示在safe area內 |
| cover |
viewport-fit:cover,頁面內容充滿螢幕 |
2、css constant()函式 與safe-area-inset-top & safe-area-inset-left & safe-area-inset-right & safe-area-inset-bottom的介紹.
當我們設定viewport-fit:contain,也就是預設的時候時;設定safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom等引數時不起作用的。當我們設定viewport-fit:cover時：設定如下
|
1 2 3 4 5 6 |
|
三、小程式適配
viewport-fit的適配方案不適合小程式。目前也沒有看到小程式有對iPhone X等異形屏有特殊的介面或欄位。小程式本身的底部tab欄對iPhone X的適配也只是簡單的加了一個白色底欄，
提高了原有tab欄的位置。我們只能通過 wx.getSystemInfo 介面取獲取裝置資訊，該介面使用方法如下：
|
1 2 3 4 5 6 7 8 9 |
|
其中 model 便是裝置的型號等資訊，如果 model 值為iphonerx ，便可認為該裝置為iPhone X，我們在入口檔案 app.js 中去進行檢測，然後在全域性增加一個 isIphoneX 欄位。
wxml部分：
|
1 |
|
wxss部分：
|
1 2 3 4 5 6 7 8 9 10 11 |
|
至於為什麼採用 68rpx，
