vue h5适配ios刘海屏_vue 刘海屏

近期做到一个基于vue的h5的项目，底部需要适配ios，尝试根据手机型号手动增加底部安全区适配，但是处理起来比较麻烦，上网查了一顿，总结了一个还算比较简单好用的方法：
例如footview是页面底部的状态栏，再给他赋值高度的时候就可以按照下面的格式来，会自动处理ios底部安全区适配，超好用.

```css
.footview {
  height: 49px;
  height: calc(49px + constant(safe-area-inset-bottom));/* 兼容 iOS < 11.2 */
  height: calc(49px + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
  background-color: transparent;
}

以上就可以自动适配ios底部，同时除了底部，官方还提供了左右（虽然不知道能不能用到）和顶部。
具体参考下面：

body {
  padding:
    constant(safe-area-inset-top)
    constant(safe-area-inset-right)
    constant(safe-area-inset-bottom)
    constant(safe-area-inset-left); /* 兼容 iOS < 11.2 */
  padding:
    env(safe-area-inset-top)
    env(safe-area-inset-right)
    env(safe-area-inset-bottom)
    env(safe-area-inset-left); /* 兼容 iOS >= 11.2 */
}