ios底部存在安全距离可通过设置 safe-area-inset-bottom

某些安卓safe-area-inset-bottom 为 0

.safe-area {
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 IOS<11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 IOS>11.2 */
}

有些场景用以上方式设置ios显示正常。 安卓底部会很奇怪（按钮贴到底部了）

解决方案：

利用 padding不能为负数

上代码

.safe-area {
  padding-bottom: calc(constant(safe-area-inset-bottom) - 32rpx); /* 兼容 IOS<11.2 */
  padding-bottom: calc(env(safe-area-inset-bottom) - 32rpx); /* 兼容 IOS>11.2 */
  &::after {
    content: '';
    display: block;
    height: 32rpx;
  }
}

这样底部间距就能自由控制拉，还不需要用js控制（完美~）！