vue h5 适配 iphone 底部白条, App.vue 文件 配置

<template>
  <div id="app">
    <keep-alive :include="cacheView">
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      cacheView: (state) => state.cacheView
    })
  }
}
</script>

<style lang="scss">
body {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 100%;
  height: 100vh;
  padding: constant(safe-area-inset-top) 0 constant(safe-area-inset-bottom);
  padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  box-sizing: border-box;
}
</style>

一般页面使用 height: 100%; 即可直接覆盖整个屏幕

如果是使用固定定位, 一定要给固定定位的元素 添加 constant(safe-area-inset-...) 和 env, 因为固定定位不受 App.vue 中 #app 的 padding 值的影响