隨着第二三批iPhone X的陸續到貨,身邊的土豪們紛紛用了起來,由於iPhone X的齊劉海致使的適配問題不少,因此這羣土豪更沉浸在各類找bug中,不出所料,豌豆公主小程序在一些地方也出現了一丟丟體驗很差的地方,主要是商品詳情頁和購物車的吸底按鈕欄,會與Home Indicator
橫條重疊,這樣在點擊下方按鈕時很容易誤觸發手勢操做,以下圖:
小程序
是bug就得修,是體驗問題就得優化,因而立馬搞了一臺iPhone X開始研究。bash
網頁端的適配還好,有viewport meta
標籤以及下面的方案進行處理。具體可參看這裏網絡
{
position: fixed;
bottom: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
background-color: #fff;
}複製代碼
但比較尷尬了,從四個角被裁掉的表現上能夠推測小程序裏的viewport-fit
默認爲cover
(根據表現猜想),可是沒有接口去更改,因此網頁端經過viewport-fix=cover
結合constant(safe-area-inset-bottom);
的適配方案不適合小程序。目前也沒有看到小程序有對iPhone X等異形屏有特殊的接口或字段。小程序自己的底部tab欄對iPhone X的適配也只是簡單的加了一個白色底欄,提升了原有tab欄的位置,爲何這麼說呢?由於這一點能夠從咱們購物車頁面看出,購物車頁吸底操做並不是經過position:fixed;bottom:0;
實現的,而是根據windowHeight-自身高度
計算top
值,從而模擬的吸底,在小程序新版本自身適配iPhone X後,致使購物車底部按鈕被蓋住了一半,由此得出上面的結論(此處同爲猜想)。app
言歸正傳,既然沒有特殊的方案獲取該值,咱們只能經過wx.getSystemInfo
接口取獲取設備信息,該接口使用方法以下:iphone
wx.getSystemInfo({
success: function(res) {
console.log(res.model)
console.log(res.pixelRatio)
console.log(res.windowWidth)
console.log(res.windowHeight)
console.log(res.language)
console.log(res.version)
console.log(res.platform)
}
})複製代碼
其中model
即是設備的型號等信息,若是model
中包含iPhone X
,即可認爲該設備爲iPhone X,咱們在入口文件app.js
中去進行檢測,然在全局增長一個isIpx
字段,將結果賦予isIpx
。xss
在子頁面中能夠讀取該值,舉個商品詳情頁的栗子:post
<!-- goods.wxml -->
<view class="button-group {{isIpx?'fix-iphonex-button':''}}">這是一個吸底按鈕區域</view>複製代碼
// goods.js
let app = getApp();
Page({
data: {
isIpx: app.globalData.isIpx?true:false
}
})複製代碼
/* app.wxss */
.fix-iphonex-button {
bottom:68rpx!important;
}
.fix-iphonex-button::after {
content: ' ';
position: fixed;
bottom: 0!important;
height: 68rpx!important;
width: 100%;
background: #fff;
}複製代碼
因而,一個簡單的適配iPhone X底部圓角的方案就完成了。
至於爲何採用68rpx
,由於iPhone X和iPhone 6的屏幕寬度都是375px,小程序中750rpx = 375px = 750物理像素
,結合下面兩圖能解釋緣由:優化
最最後,iPhone X壕能夠掃描下面小程序碼進行體驗,歡迎拍磚指正~~~
ui
最最最後,上週在組內進行了一次小程序的分享,已整理成文章,感興趣的請移步這裏這裏這裏spa