vue/uniapp h5适配苹果底部安全高度

参考文章：h5适配ios顶部和底部安全区域的问题_safe-area-inset-top-优快云博客

//适配底部小黑条，page_bottom类加一个padding距离底部的安全高度
.page_bottom {
    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS<11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS>= 11.2 */
 }

注：如果page_bottom有高度height值，上面的可能会造成page_bottom高度被压缩，所以如果加了安全高度，height值也需要加个安全高度的值

<style lang="scss" scoped>
/* 这个方案需要吸底条必须是有背景色的，因为扩展的部分背景是跟随外容器的，否则出现镂空情况。*/
.page_bottom {
  position: fixed;
  height: 45px; /*暂时发现安卓小屏手机安全区为0 && 不带单位的话padding-bottom会失效，写一个兜底, 并写在最上面；f12发现css样式如果都给height设置样式，会依次往下，用最底下的一个样式，如果最下面的没失效，依次往上查找，所以兜底的写在最上面 */
  height: calc(45px + constant(safe-area-inset-bottom)); /* 直接扩展高度，因为padding-bottom是内边距 */
  height: calc(45px + env(safe-area-inset-bottom)); /* 直接扩展高度 */
  padding-bottom: constant(safe-area-inset-bottom); /*兼容 iOS<11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS>= 11.2*/
}
</style>