小程序适配IOS底部小黑条

1、IOS底部小黑条高34px进行适配

<view class="container-px" style="padding-bottom: {{isIOS ? '68rpx' : 0}};">
  <view class="container-wrap"></view>
</view>

2、使用css

兼容ios<11.2
padding-bottom: constant(safe-area-inset-bottom); 底部安全区域812 - 778 = 34
兼容ios>11.2
padding-bottom: env(safe-area-inset-bottom);
env() 跟 constant() 需要同时存在，而且顺序不能换

<view class="container-css-fit">
  <view class="container-wrap"></view>
</view>

.container-css-fit{
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  /* 兼容ios<11.2 */
  padding-bottom: constant(safe-area-inset-bottom);  /* 底部安全区域812 - 778 = 34*/
  /* 兼容ios>11.2 */
  padding-bottom: env(safe-area-inset-bottom);
  /* env() 跟 constant() 需要同时存在，而且顺序不能换 */
}
.container-wrap{
  width: 100%;
  height: 100%;
  background-color: plum;
}

3、使用getSystemInfoSync计算安全区域

<view class="container-system" style="{{result.bottomSafeHeight ? ('padding-bottom: ' + result.bottomSafeHeight + 'px') : ''}}">
  <view class="container-wrap"></view>
</view>

const res = wx.getSystemInfoSync()
const result = {
…res,
bottomSafeHeight: 0,
isIphoneX: false,
isMi: false,
isIphone: false,
isIpad: false,
isIOS: false,
isHeightPhone: false,
}
const modelmes = result.model
const system = result.system
// 判断设备型号
if (modelmes.search(‘iPhone X’) != -1 || modelmes.search(‘iPhone 11’) != -1) {
result.isIphoneX = true;
}
if (modelmes.search(‘MI’) != -1) {
result.isMi = true;
}
if (modelmes.search(‘iPhone’) != -1) {
result.isIphone = true;
}
if (modelmes.search(‘iPad’) > -1) {
result.isIpad = true;
}
let screenWidth = result.screenWidth
let screenHeight = result.screenHeight
// 宽高比自适应
screenWidth = Math.min(screenWidth, screenHeight)
screenHeight = Math.max(screenWidth, screenHeight)
const ipadDiff = Math.abs(screenHeight / screenWidth - 1.33333)
if (ipadDiff < 0.01) {
result.isIpad = true
}
if (result.isIphone || system.indexOf(‘iOS’) > -1) {
result.isIOS = true
}
const myCanvasWidth = (640 / 375) * result.screenWidth
const myCanvasHeight = (1000 / 667) * result.screenHeight
const scale = myCanvasWidth / myCanvasHeight
if (scale < 0.64) {
result.isHeightPhone = true
}
result.navHeight = result.statusBarHeight + 46
result.pageWidth = result.windowWidth
result.pageHeight = result.windowHeight - result.navHeight
if (!result.isIOS) {
result.bottomSafeHeight = 0
}
const capsuleInfo = wx.getMenuButtonBoundingClientRect() // 获取菜单按钮（右上角胶囊按钮）的布局位置信息。坐标信息以屏幕左上角为原点
// 胶囊热区 = 胶囊和状态栏之间的留白 * 2 (保持胶囊和状态栏上下留白一致) * 2(设计上为了更好看) + 胶囊高度
const navbarHeight = (capsuleInfo.top - result.statusBarHeight) * 4 + capsuleInfo.height
// 写入胶囊数据
result.capsuleInfo = capsuleInfo;
// 安全区域
const safeArea = result.safeArea
// 可视区域高度 - 适配横竖屏场景
const height = Math.max(safeArea.height, safeArea.width)
// 状态栏高度
const statusBarHeight = result.statusBarHeight
// 获取底部安全区域高度（全面屏手机）
if (safeArea && height && screenHeight) {
result.bottomSafeHeight = screenHeight - height - statusBarHeight
if (result.bottomSafeHeight < 0) {
result.bottomSafeHeight = 0
}
}
// 设置header高度
result.headerHeight = statusBarHeight + navbarHeight
// 导航栏高度
result.navbarHeight = navbarHeight