在没有解决之前,我的样式是这样的

WX20230117-125845@2x.png

就是底部按钮已经和小横线重叠了,这就可能导致用户误触

经过查询资料发现,iphone底部其实是有一个安全区域的,为了解决这个问题

可以使用下面这样的一个方式

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
box-sizing: content-box;

在css中添加完成后,我们再看看样式就会发现底部区域已经在安全区域以上了

WX20230117-130156@2x.png

最后修改:2023 年 01 月 17 日
如果觉得我的文章对你有用,请随意赞赏