iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配

app.js

var bottomBarHeight = '';
var otherHeight = '';
let isAdaptation = false
let isIphoneX = false
let pixelRate = 0.5
let statusBarHeight
wx.getSystemInfo({
  success: res => {
    // console.log(res);
    let modelmes = res.model;
    pixelRate = res.windowWidth / 750;
    if (modelmes.search('iPhone X') != -1) {
      isIphoneX = true
      bottomBarHeight = 164; //tabbar高度
      otherHeight = 148; // 其他需要适配的底部高度
      isAdaptation = true
    } else {
      bottomBarHeight = 116;
      otherHeight = 100;
      isAdaptation = false
    }
    // console.log(otherHeight)
    statusBarHeight = res.statusBarHeight
    wx.setStorageSync('modelmes', modelmes)
  }
});

index.js

const app = getApp()  
data: {
    bottomBarHeight: app.globalData.bottomBarHeight, //是否是iPhone X
  },

index.wxml

 <view style='padding-bottom:{{bottomBarHeight}}rpx'>
//需要适配的区域
 <view>

index.wxss

.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
//safe-area-inset-left：安全区域距离左边边界的距离
//safe-area-inset-right：安全区域距离右边边界的距离
//safe-area-inset-top：安全区域距离顶部边界的距离
//safe-area-inset-bottom ：安全距离底部边界的距离
}