index.vue

/**
 * @Author Think
 * @Date 2018/11/24
 */

<template>
  <div :class="{'h-ios': isIos}" class="h-view">
    <slot />
  </div>
</template>

<script>
import { detectOS } from '../../common/utils/index'

export default {
  name: 'HView',
  props: {
    fullScreen: {
      // 是否为全屏应用，全屏子应用此项需设为true
      type: Boolean,
      default: true,
    },
  },
  data () {
    return {
      isIos: false,
    }
  },
  created () {
    this.fullScreen && detectOS() === 'ios' && (this.isIos = true)
  },
}
</script>

<style lang="less" scoped>
.h-view {
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding-bottom: 44px;
  // background-color: $bgColor;
}
.platform-ios{
  .h-view{
    padding-bottom: 64px;
  }
}

// iPhoneX适配
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
  .platform-ios {
    .h-view {
      padding-bottom: 120px;
    }
  }
}

// iPhoneX Max适配
@media only screen and (device-width: 414px) and (device-height: 896px) {
  .platform-ios {
    .h-view {
      padding-bottom: 120px;
    }
  }
}
</style>