Uniapp 之适配安全区域

在苹果 iPhoneX 、iPhone XR及以上设备上，底部的物理Home键被取消，改为底部小黑条替代home键功能。微信小程序需要针对这种情况进行适配，否则可能会遇到底部按钮或选项卡栏与底部小黑条重叠的情况，如下图

苹果官方推荐使用env()，constant()来适配，建议使用该方案，不需要管数值具体是多少

env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：

safe-area-inset-left：安全区域距离左边边界的距离
safe-area-inset-right：安全区域距离右边边界的距离
safe-area-inset-top：安全区域距离顶部边界的距离
safe-area-inset-bottom ：安全距离底部边界的距离

 

解决：

// 写在需要添加底部边距的盒子上
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/