小程序开发 uni-app 获取底部安全区域适配苹果底部黑条及IOS系统的坑_uni-app css获取安全区

在小程序的开发中，需要适配不同机型的安卓和苹果，此文章讲解在适配苹果IOS系统踩过的坑。

1、margin-bottom属性

页面最底部的元素，例如图片中的按钮，如果想要距离底部有50rpx,按照常规写法margin-bottom:50rpx;,安卓手机则会正常显示，苹果手机不生效，系统自带的白条/黑条会挡住部分按钮。
解决办法:
a.对于不影响元素本身的情况，则将margin-bottom改为padding-bottom，会撑起距底部的距离（图中按钮情况就不适用，会撑起按钮的高度）
b.给按钮元素添加一个父元素设置高度,或添加的父元素添加padding-bottom。

2、苹果手机获取底部安全距离

通常使用env(safe-area-inset-bottom)来获取底部安全区域的高度，从而适配 iPhone X 及以上的设备。不过，在 Android 设备上，env(safe-area-inset-bottom) 返回的值是 0，因此需要使用其他方式来适配底部安全区域。
兼容 iOS 设备: constant(safe-area-inset-bottom)
兼容 iPhone X 及以上设备: env(safe-area-inset-bottom)
在使用时可按照以下顺序书写：

.container {
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS 设备 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iPhone X 及以上设备 */
}
1
2
3
4

如果想在底部安全区域的高度上再添加50px，那么可按照以下方式书写：

  padding-bottom: calc(env(safe-area-inset-bottom) + 50px); /* 底部安全区域高度加 50px 的高度 */
1

3、组件全屏显示

例如在小程序中点击出现弹窗，弹窗需要一个全屏显示的背景蒙层，蒙层设置宽高100%是不生效的，需要设置宽高为vw和vh，如下代码：

.container {
  width:100vw;
  height:100vh;
}
1
2
3
4

如果对你有所帮助，请记得一键三联哦