一尚粘、? 安全區(qū)域(safe area)
與iPhone6/6s/7/8相比，iPhone X 無論是在屏幕尺寸敲长、分辨率郎嫁、甚至是形狀上都發(fā)生了較大的改變，下面以iPhone 8作為參照物祈噪，先看看iPhone X尺寸上的變化：
蘋果對于 iPhone X 的設(shè)計布局意見如下：
核心內(nèi)容應(yīng)該處于 Safe area 確保不會被設(shè)備圓角(corners)泽铛，傳感器外殼(sensor housing，齊劉海) 以及底部的 Home Indicator 遮擋钳降。也就是說 我們設(shè)計顯示的內(nèi)容應(yīng)該盡可能的在安全區(qū)域內(nèi)；
二腌巾、h5頁面適配
1遂填、viewport-fit的meta標(biāo)簽作為適配方案铲觉；viewport-fit的默認(rèn)值是auto。
viewport-fit取值如下：
? auto默認(rèn)：viewprot-fit:contain;頁面內(nèi)容顯示在safe area內(nèi)
? coverviewport-fit:cover,頁面內(nèi)容充滿屏幕
2吓坚、css constant()函數(shù) 與safe-area-inset-top & safe-area-inset-left & safe-area-inset-right & safe-area-inset-bottom的介紹.
當(dāng)我們設(shè)置viewport-fit:contain,也就是默認(rèn)的時候時;設(shè)置safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom等參數(shù)時不起作用的撵幽。當(dāng)我們設(shè)置viewport-fit:cover時：設(shè)置如下
body {
????padding-top: constant(safe-area-inset-top);?? //為導(dǎo)航欄+狀態(tài)欄的高度 88px???????????
????padding-left: constant(safe-area-inset-left);?? //如果未豎屏?xí)r為0???????????????
????padding-right: constant(safe-area-inset-right); //如果未豎屏?xí)r為0???????????????
????padding-bottom: constant(safe-area-inset-bottom);//為底下圓弧的高度 34px??????
}
三、小程序適配
viewport-fit的適配方案不適合小程序礁击。目前也沒有看到小程序有對iPhone X等異形屏有特殊的接口或字段盐杂。小程序本身的底部tab欄對iPhone X的適配也只是簡單的加了一個白色底欄，
提高了原有tab欄的位置哆窿。我們只能通過 wx.getSystemInfo 接口取獲取設(shè)備信息链烈，該接口使用方法如下：
wx.getSystemInfo({
??????success: function (res) {
???????????if (res.model == 'iphonrx') {
?????????????????this.setData({
????????????????????????isIphoneX: true
??????????????????})
???????????}
??????}
})
其中 model 便是設(shè)備的型號等信息，如果 model 值為iphonerx 挚躯，便可認(rèn)為該設(shè)備為iPhone X强衡，我們在入口文件 app.js 中去進行檢測，然后在全局增加一個 isIphoneX 字段码荔。
wxml部分：
1這是一個吸底按鈕區(qū)域
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漩勤，
