uni-app小程序/app针对iPhoneX等底部安全区域兼容

[aru_1]什么是安全区域?

上图:

iphoneX适配

在非APP端，诸如小程序，或者微信浏览器(其他浏览器，如UC等手机浏览器，底部有浏览器工具条，不存在安全区指示条引起的问题)，底部是没有安全区占位的， 这种情况，就要使用css去解决，一般是通过给元素添加底部内边距的形式，例如：

.list {  
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);  
	}  

或
.list {  
                position: fixed;
	        left: 0;
	        right: 0;
	        bottom: 0;
	        bottom: constant(safe-area-inset-bottom);
	        bottom: env(safe-area-inset-bottom);
	}

已仅为举例 具体看上图设置你要的css样式即可

在APP端(以下只对APP生效)，可以通过项目根目录的mainfest.json文件app-plus节点下配置safearea的bottom属性为none，以此来关闭IPhone X等机型的底部安全区域。 配置后需要重新编译，并重启调试基座才会生效，具体如下：

"app-plus": {
	"safearea": {
		"bottom": {
			"offset": "none"
		}
	}
}

如果offset设置为auto，那么在IPhone X的底部安全区，APP上就会生成一个原生的元素进行占位，此时也就无需解决安全区指示条引起的问题。