在使用uniapp开发小程序或者移动端时，为了更好的适配各端，有些设备底部需要留出安全区域，不然会被设备的虚拟键遮挡住，比如ios的小横杠。

ios底部默认会留出安全区域，导致不需要安全区域的页面也会出现留白，可以在 manifest.json 中的源码视图中添加如下代码：

 /* 5+App特有相关 */
    "app-plus" : {
	    "safearea": {
				// 底部安全区域配置，仅iOS平台生效  
				"bottom": {
					// offset 底部安全区域偏移
					// "none" 表示不空出安全区域
					// "auto" 自动计算空出安全区域
					"offset": "none"
				}
			}
    }

在需要留出安全区域的地方使用环境变量 safe-area-inset-bottom 来获取底部安全区域的值（safe-area-inset-top 可以获取顶部安全区域的值），可以在全局css文件中设置一个类样式，在需要的地方使用

.safe-area-inset-bottom {
	/* 不兼容时默认高度 */
	height: 20px;
	
	/* 
	如果需要多留一点安全区域可以这样写
	height: calc(10px + env(safe-area-inset-bottom));
	可以根据需求使用 height 或 padding-bottom 等
	 */
    height: env(safe-area-inset-bottom);
}

大家好，我是逆风也微笑，不水文，无废话，觉得文章不错，对你有帮助，那就点个赞、点个关注吧，就是对作者最大的鼓励与支持，谢谢。