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


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:


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;
  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;
  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/


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!

Recommended Today

PHP 12th week function learning record

sha1() effect sha1()Function to evaluate the value of a stringSHA-1Hash. usage sha1(string,raw) case <?php $str = “Hello”; echo sha1($str); ?> result f7ff9e8b7bb2e09b70935a5d785e0cc5d9d0abf0 sha1_file() effect sha1_file()Function calculation fileSHA-1Hash. usage sha1_file(file,raw) case <?php $filename = “test.txt”; $sha1file = sha1_file($filename); echo $sha1file; ?> result aaf4c61ddcc5e8a2dabede0f3b482cd9aea9434d similar_text() effect similar_text()Function to calculate the similarity between two strings. usage similar_text(string1,string2,percent) case […]