uniapp 打包成APP或小程序后或H5后 IOS(iphoneX机型) 底部安全区域适配（避开底部黑条虚拟键）_uniapp 小程序安全区

一、IOS 安全区域适配( 配置方法 )

---

在 manifest.json 文件的 "app-plus" 节点下添加 "safearea" 适配 iOS 的安全区域，

"background" 对应正常模式下安全区域外的背景颜色，

"backgroundDark"对应暗黑模式（夜间模式 / 深色模式）下安全区域外的背景颜色

"app-plus" : {
	"safearea": { //iOS平台的安全区域
		"background": "#ffffff",//正常模式下安全区域外的背景颜色
		"backgroundDark": "#2f0508", //应暗黑模式下安全区域外的背景颜色 HX 3.1.19+支持
		"bottom": {
			"offset": "auto"//开启原生安全区域占位
		}
	}
}

二、IOS 安全区域适配( CSS方法适配)

---

APP端不使用配置，非APP端可不配置

"app-plus" : {
	"safearea": { //iOS平台的安全区域
		"bottom": {
			"offset": "none"//关闭原生安全区域占位
		}
	}
}

 然后使用CSS常量  constant(safe-area-inset-bottom) 、env(safe-area-inset-bottom) 来适配，如下在需要适配的页面元素中使用，将下面CSS放入公共样式中，通过类名快速调用

比如为列表底部添加内边距避开安全区，在 iPhoneX 上列表底部会有内边距，在其他设备上没有内边距：

/* iPhoneX底部安全区定义*/
.safe-area-inset-bottom {
  padding-bottom: 0;  
  padding-bottom: constant(safe-area-inset-bottom);  
  padding-bottom: env(safe-area-inset-bottom);  
} 

也可以用于高度（height），间距（margin）示例如下： 

/* 设置padding-bottom*/
padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2
padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2
 
/* 设置高度*/
height: calc(100px + constant(safe-area-inset-bottom));
height: calc(100px + env(safe-area-inset-bottom));
 
/* 设置margin-bottom*/
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
 

constant()函数是WebKit的CSS函数，用于在小程序中设置底部安全距离。而env()函数是CSS的通用函数，可以在任何支持的环境中使用

注意：

• 当网页设置viewport-fit=cover的时候才生效（uniapp开发，小程序无需设置，默认viewport-fit=cover）
• constant()和env()需要同时存在，顺序不能换。
• nvue 页面不支持 css 常量，可以使用 uni.getSystemInfo 获取 safeAreaInsets 动态设置到 元素的style 属性中。
• 使用pages.json里配置的原生tabbar的tabbar页面，无需处理，原生tabbar会自动适配。