微信小程序自动计算底部安全距离
直接上代码// 给最外层的盒子类写上如下 padding-bottom 的内容
.app-container {
width: 100vw;
box-sizing: border-box;
/* 利用新增的 env() 和 constant() 特性,自动计算底部安全距离 */
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
/* 可计算 */
padding-bottom: calc(124rpx + env(safe-area-inset-bottom));
}
很方便,无需再去手写相关方法去动态计算
效果如下
https://img-blog.csdnimg.cn/aa484739b77643f0875546caa1e39573.png
使用padding-bottom自动撑开底部高度,实测安卓苹果皆可用,老式安卓底部带返回按钮导航栏的也正常
页:
[1]