The bottom suction button in the applet fits the iPhone X scheme

With the arrival of the second and third batches of iPhone X, the local tycoons have started to use the iPhone X. Because of the matching problems caused by the bangs of iPhone X, these tycoons are more immersed in all kinds of bug finding. As expected, princess and Pea applet has some bad experience in some places. The bottom button bar of the product details page and shopping cart overlaps with the Home Indicator bar, so it is easy to mistakenly trigger the gesture operation when clicking the bottom button, as shown below:

Bugs have to be fixed, experience problems have to be optimized, so immediately got an iPhone X and started researching.

Web adaptation is good, there are viewport meta tags and the following scheme for processing. See here for details

{
  position: fixed;
  bottom: 0;
  width: 100%;
  height: constant(safe-area-inset-bottom);
  background-color: #fff;
}Copy the code

The viewport-fit in the applet defaults to cover, but there is no interface to change it. Constant (safe-area-inset-bottom); The adaptation scheme is not suitable for applets. I don’t see any special interfaces or fields for the iPhone X and other special screens. The bottom TAB of the app itself is simply a white TAB, which raises the position of the original TAB. Why? Because this can be seen from our shopping cart page, the shopping cart page suction operation is not through position:fixed; bottom:0; Instead, the new version of the applet was adapted to the iPhone X so that the bottom button in the shopping cart was partially covered.

Since there is no special way to get this value, we can only get the device information through the wx.getSystemInfo interface, which is used as follows:

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)
  }
})Copy the code

If the model contains iPhone X, the device can be considered as iPhone X. We check it in the entry file app.js, and add an isIpx field globally to give the result to isIpx.

This value can be read in a child page, such as the chestnut of the product details page:

<! -- goods.wxml --> <view class="button-group {{isIpx? 'fix-iphonex-button':''}}"> This is the bottom button area </view>Copy the code

// goods.js
let app = getApp();
Page({
    data: {
        isIpx: app.globalData.isIpx?true:false}})Copy the code

/* 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;
}Copy the code

Thus, a simple solution to the iPhone X’s rounded bottom is complete. The screen width of iPhone X and iPhone 6 is 375px, and 750rpx = 375px = 750 physical pixels in the mini program. The following two figures can explain the reason:

Finally, the iPhone X can scan the following snippets of code to experience it

Last week, I shared a small program in the group, which has been organized into an article. If you are interested, please go here, here and here