In WeChat applets, The bottoming button is adapted to the iPhone X solution, and the mini-app iphone

The bottoming button in the applet is applicable to the iPhone X solution, and the iphone in the Applet

With the arrival of the second three batches of iPhone X, the local tyrants around them began to use them one after another. There were many adaptation problems caused by the iPhone X's Qi liuhai, as a result, this group of local tyrants are more immersed in various bugs. As expected, Princess peas also experienced poor experience in some places, the product details page and the shopping cart bottom button bar will overlap with Home Indicator, so that it is easy to trigger a gesture when you click the button below, such:

 

From Network, intrusion and Deletion

If it was a bug, it had to be fixed. If it was a problem of experience, it had to be optimized. So I immediately started to study an iPhone X.

The webpage is well adapted, with the viewport meta tag and the following solutions. For more information, see here.

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

But it is awkward. From the perspective of the four corners, we can infer that the viewport-fit in the applet is covered by default (based on the performance guess), but there is no interface to change it, therefore, the adaptation solution of the web page using viewport-fix = cover and constant (safe-area-inset-bottom) is not suitable for small programs. Currently, no small programs have special interfaces or fields for iPhone X and other shaped screens. The tab bar at the bottom of the applet simply adds a white bar to adapt to the iPhone X, improving the position of the original tab bar. Why? Because of this, we can see from the shopping cart page that the shopping cart page does not use position: fixed; bottom: 0;, but calculates the top value based on the previous wheight-height, in this way, after the new version of the mini-app is adapted to the iPhone X, the buttons at the bottom of the shopping cart are half covered, and the above conclusion is drawn.

To put it bluntly, since there is no special scheme to get this value, we can only get the device information through the wx. getSystemInfo interface. This interface 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) }})

The model is the device model and other information. If the model contains the iPhone X, the device can be considered as the iPhone X. in js, an isIpx field is added globally to grant the result to isIpx.

This value can be read on the sub-page. For example, the following is the example on the product details page:

<! -- Goods. wxml --> <view class = "button-group {isIpx? 'Fix-iphonex-button': ''}"> This is a bottom-sucking button area </view> // goods. jslet 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 ;}

Therefore, a simple adaptation solution to the bottom corner of the iPhone X is complete.

As for why 68rpx is used, because the screen width of iPhone X and iPhone 6 is 375px, and 750rpx = 375px = 750 physical pixel in the small program, the following two figures can be used to explain the reason:

 

From Network, intrusion and Deletion

 

From Network, intrusion and Deletion

Summary

The above is a small Editor to introduce you to the iPhone X solution. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!