公告列表
公告列表
收藏
回答

padding-bottom: env(safe-area-inset-bottom)问题

微信小程序端使用了padding-bottom: constant(safe-area-inset-bottom);  padding-bottom: env(safe-area-inset-bottom); 会把底部没有黑条的终端的padding-bottom给覆盖掉变为0？

回答关注问题邀请回答
收藏

2 个回答

  • 张从心
    张从心
    2021-07-21

    当然会被覆盖了，用计算属性做兼容 calc(16rpx + constant(safe-area-inset-bottom))

    2021-07-21
    有用
    回复 8
    • 如此而已"
      如此而已"
      2021-07-21
      我刚刚试了下calc(16rpx + constant(safe-area-inset-bottom))，所有手机终端全部都为16rpx了，safe-area-inset-bottom这个没有生效了
      2021-07-21
      赞
      回复
    • 张从心
      张从心
      2021-07-21回复如此而已"
      你是这样写的么？
       padding-bottom:calc(16rpx + constant(safe-area-inset-bottom));
      padding-bottom:calc(16rpx + env(safe-area-inset-bottom));
      2021-07-21
      赞
      回复
    • 张从心
      张从心
      2021-07-21回复如此而已"
      这两个都要加上
      2021-07-21
      赞
      回复
    • 如此而已"
      如此而已"
      2021-07-21回复张从心
      非常感谢，解决了
      2021-07-21
      赞
      回复
    • Echo_🦩
      Echo_🦩
      2023-11-24回复张从心
      是这样写的，还是不管用。手机机型：苹果14pro和15plus
      2023-11-24
      赞
      回复
    查看更多(3)
  • 微喵网络
    微喵网络
    2021-07-21

    没看懂

    2021-07-21
    有用
    回复 4
    • 如此而已"
      如此而已"
      2021-07-21
      padding-bottom: 16rpx;（没有安全区域的手机）
          padding-bottom: constant(safe-area-inset-bottom);（兼容有安全区域的手机）
          padding-bottom: env(safe-area-inset-bottom);






      添加了兼容有安全区域的afe-area-inset-bottom代码会把之前设置的16rpx覆盖掉变为0，怎么办
      2021-07-21
      赞
      回复
    • 微喵网络
      微喵网络
      2021-07-21回复如此而已"
      安全区域一般不这么做，正常状态下底部距离是16rpx，加上安全区之后应该是16rpx基础上加上安全区距离，而不是用安全区距离替换16rpx
      2021-07-21
      赞
      回复
    • 微喵网络
      微喵网络
      2021-07-21回复如此而已"
      constant和env都加上试试，或者把安全区域距离放在其他位置，比如子节点的margin-bottom
      2021-07-21
      赞
      回复
    • 如此而已"
      如此而已"
      2021-07-21回复微喵网络
      嗯嗯  非常感谢  已经解决了
      2021-07-21
      赞
      回复
请 登录 后发表内容
相关问题
相关文档