一、 安全區域(safe area)
與iPhone6/6s/7/8相比，iPhone X 無論是在屏幕尺寸、分辨率、甚至是形狀上都發生了較大的改變，下面以iPhone 8作為參照物，先看看iPhone X尺寸上的變化：
蘋果對於 iPhone X 的設計布局意見如下：
核心內容應該處於 Safe area 確保不會被設備圓角(corners)，傳感器外殼(sensor housing，齊劉海) 以及底部的 Home Indicator 遮擋。也就是說 我們設計顯示的內容應該盡可能的在安全區域內；
二、h5頁面適配
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時：設置如下
body {
padding-top: constant(safe-area-inset-top); //為導航欄+狀態欄的高度 88px
padding-left: constant(safe-area-inset-left); //如果未豎屏時為0
padding-right: constant(safe-area-inset-right); //如果未豎屏時為0
padding-bottom: constant(safe-area-inset-bottom);//為底下圓弧的高度 34px
}
三、小程序適配
viewport-fit的適配方案不適合小程序。目前也沒有看到小程序有對iPhone X等異形屏有特殊的接口或字段。小程序本身的底部tab欄對iPhone X的適配也只是簡單的加了一個白色底欄，
提高了原有tab欄的位置。我們只能通過 wx.getSystemInfo 接口取獲取設備信息，該接口使用方法如下：
wx.getSystemInfo({
success: function (res) {
if (res.model == 'iphonrx') {
this.setData({
isIphoneX: true
})
}
}
})
其中 model 便是設備的型號等信息，如果 model 值為iphonerx ，便可認為該設備為iPhone X，我們在入口文件 app.js 中去進行檢測，然后在全局增加一個 isIphoneX 字段。
wxml部分：
<view class="button-group {{isIphoneX ?'fix-iphonex-button':''}}">這是一個吸底按鈕區域</view>
wxss部分：
.fix-iphonex-button {
bottom:68rpx!important;
}
.fix-iphonex-button::after {
content: ' ';
position: fixed;
bottom: 0!important;
height: 68rpx!important;
width: 100%;
background: #fff;
}
至於為什么采用 68rpx，
