本文介绍了如何使用CSS的`env(safe-area-inset-bottom)`和`constant(safe-area-inset-bottom)`来确保元素在iOS和安卓设备上不会被底部导航栏或状态栏遮挡。通过添加适当的`margin-bottom`或`padding-bottom`，可以为内容提供安全的距离，避免布局问题。选择使用`padding-bottom`还是`margin-bottom`取决于具体业务需求。
定位浮条兼容ios和安卓：
margin-bottom: env(safe-area-inset-bottom);
margin-bottom: constant(safe-area-inset-bottom);
就是说你不想让某元素定位的bottom不计算iphone底部小黑条的高度，就在该元素的css里加上该代码
兼容ios底部导航栏不被小黑条遮挡：
给底部一个安全距离
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
注意的点 就是说根据你的业务需求判断使用padding-bottom还是margin-bottom更为合适
扫一扫
1862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
