移动端H5适配iphoneX底部栏解决办法

1、meta标签放入viewport-fit=cover

<meta name="viewport" content="width=device-width...... viewport-fit=cover">

2、css设置

@supports (bottom: env(safe-area-inset-bottom)){
    body,
    .footer（底部栏）{
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom);
    }
}

这是在百度上找到的办法，确实可行，但是要用在Vue项目里面，还有写需要注意的，注意点如下：

在要加footer的html里面不能同时存在id选择器，比如：

<div id=“tabbar” class=“footer”></div>

这样加footer类名不会生效，修改成：

<div class="tabbar footer"></div>

这样就可以了

而且，想要使用这个footer，不能给要使用的html加上固定高度，比如：

.tabbar{
	width:100%;
	height:.52rem;
}

这样是不可以的，需要将高度去掉，标签里面的内容要靠padding撑起才可以

项目中发现的问题，做个笔记