Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how WeChat Mini Programs realizes the adaptation iphoneX". The editor shows you the operation process through the actual case, the operation method is simple and fast, and the practicality is strong. I hope this "WeChat Mini Programs how to achieve adaptation iphoneX" article can help you solve the problem.

1. Security area (safe area)

Compared with iPhone6/6s/7/8, iPhone X has undergone great changes in screen size, resolution, and even shape. Using iPhone 8 as a reference, let's take a look at the changes in iPhone X size:

Apple's comments on the layout of the iPhone X are as follows:

The core content should be in the Safe area to ensure that it is not obscured by the device fillet (corners), the sensor housing (sensor housing, bangs) and the Home Indicator at the bottom. That is to say, the content we design and display should be in the safe zone as much as possible.

II. H6 page adaptation

1. The meta tag of viewport-fit is used as the adaptation scheme; the default value of viewport-fit is auto.

The values of viewport-fit are as follows:

Auto default: viewprot-fit:contain; page content is displayed in cover within safe area

Viewport-fit:cover, the page content fills the screen

2. The introduction of css constant () function and safe-area-inset-top & safe-area-inset-left & safe-area-inset-right & safe-area-inset-bottom.

When we set viewport-fit:contain, which is the default, it does not work when setting parameters such as safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, and safe-area-inset-bottom. When we set up viewport-fit:cover: the settings are as follows

Body {padding-top: constant (safe-area-inset-top); / / height of navigation bar + status bar 88px padding-left: constant (safe-area-inset-left); / / 0 padding-right: constant (safe-area-inset-right) if not vertically displayed; / / 0 padding-bottom: constant (safe-area-inset-bottom) if not vertically displayed; / / height 34px} of bottom arc

III. Mini Program adaptation

Viewport-fit 's adaptation scheme is not suitable for Mini Program. At present, we do not see that Mini Program has any special interfaces or fields for special-shaped screens such as iPhone X. The adaptation of the bottom tab column of Mini Program to iPhone X simply adds a white bottom column, which improves the position of the original tab column. We can only obtain device information through the wx.getSystemInfo API. This API is used as follows:

Wx.getSystemInfo ({success: function (res) {if (res.model = = 'iphonrx') {this.setData ({isIphoneX: true})}})

Model is the model of the device and other information. If the model value is iphonerx, the device can be considered as iPhone X. We check it in the entry file app.js, and then add an isIphoneX field globally.

Wxml section:

This is a bottom button area.

Wxss section:

.fix-iphonex-button {bottombank 68rpximportant;} .fix-iphonex-button::after {content:'; position: fixed; bottom: 0important; height: 68rpximportant; width: 100%; background: # fff;}

As to why 68rpx is adopted

This is the end of the introduction of "how to adapt to iphoneX by WeChat Mini Programs". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.