场景：
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属性并加载具体样式.
大功告成~
 1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签： #vant #底部安全区适配 #message #对象并将读取到的数据存入 #Message然后
