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

Source: Internet
Author: User

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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.