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撑起才可以
项目中发现的问题,做个笔记