在uniapp开发中，我们可能会遇到一个问题，就是在iOS设备上底部会有一个安全区域，导致页面无法完全显示。因为iphoneX等机型最下面会有条黑色等线，导致按钮等元素被遮住部分，所以设置安全区边距会往上提，如果不是刘海屏则保持原来样式。（注：在小程序模拟器上不生效，以真机为准。）

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);
}

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/12719