查看: 4325|回复: 0

微信小程序自动计算底部安全距离

74

主题

77

帖子

425

积分

站长

Rank: 9Rank: 9Rank: 9

积分
425
直接上代码
[CSS] 纯文本查看 复制代码
// 给最外层的盒子类写上如下 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));
}

很方便,无需再去手写相关方法去动态计算
效果如下


使用padding-bottom自动撑开底部高度,实测安卓苹果皆可用,老式安卓底部带返回按钮导航栏的也正常

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

部分素材来源于网络,如有侵权请联系www@benzou.cn进行删除。
Copyright   ©2016-2024  重庆奔走科技有限公司  Powered by © benzou.cn / benzou.cc
快速回复 返回列表 返回顶部