小程式中吸底按鈕適配 iPhone X 方案
隨著第二三批iPhone X的陸續到貨,身邊的土豪們紛紛用了起來,因為iPhone X的齊劉海導致的適配問題很多,所以這群土豪更沉浸在各種找bug中,不出所料,豌豆公主小程式在一些地方也出現了一丟丟體驗不好的地方,主要是商品詳情頁和購物車的吸底按鈕欄,會與Home
Indicator
橫條重疊,這樣在點選下方按鈕時很容易誤觸發手勢操作,如下圖:
是bug就得修,是體驗問題就得優化,於是立馬搞了一臺iPhone X開始研究。網頁端的適配還好,有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後,導致購物車底部按鈕被蓋住了一半,由此得出上面的結論(此處同為猜測)。
言歸正傳,既然沒有特殊的方案獲取該值,我們只能通過wx.getSystemInfo
介面取獲取裝置資訊,該介面使用方法如下:
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
。
在子頁面中可以讀取該值,舉個商品詳情頁的栗子:
<!-- 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壕可以掃描下面小程式碼進行體驗,歡迎拍磚指正~~~