Vant 自定义组件适配 iphone 底部安全区

场景：

IM

---

问题：

聊天界面输入框在iphone下被底部指示条遮盖，如下图：

---

解决方案：

参考 Vant 内置组件适配方案

Vant文档：https://vant-contrib.gitee.io/vant/#/zh-CN/advanced-usage

Vant 内置组件中添加了 safe-area-inset-bottom 属性，即是在css中添加对应样式

iOS11 的新增特性，Webkit 的 CSS 函数，用于设定安全区域与边界的距离，它有四个预定义的变量：

• safe-area-inset-left：安全区域距离左边边界距离
• safe-area-inset-right：安全区域距离右边边界距离
• safe-area-inset-top：安全区域距离顶部边界距离
• safe-area-inset-bottom：安全区域距离底部边界距离

第一步：在 index.html 的 head 标签中加入以下 meta：

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
/>

第二步：在项目 index.css 中添加下列样式：

/**
 * 适配 iphone 底部安全区（指示条，配合index.html <meta name="viewport" ... />使用
 */
@supports (bottom: env(safe-area-inset-bottom)){
    #app {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

@supports 是CSS3新引入的规则之一，主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式.

---

大功告成~