收藏
回答

关于 env(safe-area-inset-bottom)的适配问题?

如果才能做到iPhone全面屏情况下使用env(safe-area-inset-bottom)来适配底部安全距离,而如果是其他的安卓手机或IPhone手机,底部安全距离设置固定值,比如40rpx,因为iPhone的env(safe-area-inset-bottom)底部安全距离已经足够大了,如果使用calc(40rpx + env(safe-area-inset-bottom)),虽然安卓机或其他iPhone手机底部看起来挺协调,但iPhone的全面屏底部的空缺就会非常的大,请问有解决方法嘛?难道通过js判断当前设备的安全距离嘛

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

1 个回答

  • 浪花骑士
    浪花骑士
    2023-07-19

    iPhone的全面屏底部的空缺就会非常的大:

    你写calc(40rpx + env(safe-area-inset-bottom))的话,肯定会非常大啊

    因为你在本身安全距离的基础上又加了40rpx

    你直接写env(safe-area-inset-bottom);不就行了?

    有安全距离的时候,就是安全距离本身,没有的时候,就是没有

    2023-07-19
    有用 1
    回复 3
    • 那片天那段曲
      那片天那段曲
      2023-07-19
      感谢您的回答,但我想要的效果是padding-bottom在iPhone全面屏设置了env(safe-area-inset-bottom),而非全面屏或是安卓手机,padding-bottom设置的则是固定的值,例如40rpx
      2023-07-19
      回复
    • 似水流年
      似水流年
      2023-07-19回复那片天那段曲
      max(env(safe-area-inset-bottom, 40rpx),取最大值,例如inset-bottom为0,padding-botton即为40rpx
      2023-07-19
      3
      回复
    • 那片天那段曲
      那片天那段曲
      2023-07-19回复似水流年
      感谢!有效!省事!比心!
      2023-07-19
      回复
登录 后发表内容