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

子成君 153 0

[aru_1]什么是安全区域?

上图:

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

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节点下配置safeareabottom属性为none,以此来关闭IPhone X等机型的底部安全区域。 配置后需要重新编译,并重启调试基座才会生效,具体如下:

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

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

发表评论 取消回复
OwO 图片 链接 代码

分享