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

这篇具有很好参考价值的文章主要介绍了uniapp 打包成APP或小程序后或H5后 IOS(iphoneX机型) 底部安全区域适配（避开底部黑条虚拟键）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、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的通用函数，可以在任何支持的环境中使用

注意：文章来源地址https://www.toymoban.com/news/detail-835313.html

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

到了这里，关于uniapp 打包成APP或小程序后或H5后 IOS(iphoneX机型) 底部安全区域适配（避开底部黑条虚拟键）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！