微信小程序自动计算底部安全距离

微信小程序自动计算底部安全距离

直接上代码

// 给最外层的盒子类写上如下 padding-bottom 的内容
.app-container {
  width: 100vw;
  box-sizing: border-box;
  /* 利用新增的 env() 和 constant() 特性，自动计算底部安全距离 */
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  /* 可计算 */
  padding-bottom: calc(124rpx + env(safe-area-inset-bottom));
}

很方便，无需再去手写相关方法去动态计算
效果如下

使用padding-bottom自动撑开底部高度，实测安卓苹果皆可用，老式安卓底部带返回按钮导航栏的也正常