小程序适配IOS底部小黑条

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

xml 复制代码

<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() 需要同时存在，而且顺序不能换

xml 复制代码

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

css 复制代码

.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计算安全区域

xml 复制代码

<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