Wechat app iPhone x bottom security area (bottom black bar) adaptation (one minute solution)

Time:2020-1-25

For tabbar of wechat app, iPhone x will be covered by a small black bar at the bottom, which needs to be handled. The general idea is to get the phone model and judge the style respectively, as follows:

Security area refers to the area where content can be seen (blue part in the figure):

Rendering before and after treatment:

Steps:

1. Call wx.getsysteminfo in the onlaunch function of app.js to obtain the res.model and store it as a global variable:


onLaunch: function() {
 let _self = this;
 wx.getSystemInfo({
  success: res => {
  let modelmes = res.model;
  if (modelmes.search('iPhone X') != -1) {
   _self.globalData.isIphoneX = true
  }
  wx.setStorageSync('modelmes', modelmes)
  }
 })
}

2. In the onload function of the JS file of the required page, take out the phone model value stored in the first step from the global variable. Here it is set as isiphonex:


onLoad: function(options) 
 let modelmes = wx.getStorageSync('modelmes');
 let isIphoneX = app.globalData.isIphoneX;
 this.setData({
  isIphoneX: isIphoneX
 })
 }

3. In the wxml of the required page, use the ternary operator to judge the bottom position according to whether the mobile phone model is iPhone X:


<view style="margin-bottom: {{isIphoneX ? '68rpx' : '0rpx'}};"></view>

Has been resolved.

This is the simplest way. There are other ways to wait for kids to explore and practice. For example, you can use IOS to add“viewport-fit”Characteristic or“env()andconstant()” Characteristic.

Please refer to the official document: https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptability-and-layout/

summary

The above is the adaptation of the security area (black bar) at the bottom of the wechat app iPhone x introduced by Xiaobian to you. I hope it can help you. If you have any questions, please leave a message to me and Xiaobian will reply to you in time. Thank you very much for your support of the developepaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!