评论

小程序利用safe-area-inset-*兼容iPhoneX

小程序在适配iPhoneX的过程中碰到了坑,查了很多资料说的都模凌两可。很多都是经验只谈,当然这篇文章也是从实践中总结出来的。所以想出一篇文章,只要能看懂文字就能看懂该文章。

分别创建屏幕上边框,右边框,下边框,左边框安全距离:
safe-area-inset-top,
safe-area-inset-right,
safe-area-inset-bottom,
safe-area-inset-left

使用:
iOS 11
padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);

iOS 11.2 beta及其后
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);

兼容性写法:
padding-top: 10px;
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);

与calc合用:
padding-top: 10px;
padding-top: calc(10px + constant(safe-area-inset-top));
padding-top: calc(10px + env(safe-area-inset-top));

终!使用sass@mixin:
@mixin x-padding-bottom($val:0px) {
padding-bottom: $val;
padding-bottom: calc(#{$val / 2} + constant(safe-area-inset-bottom)); /* no */
padding-bottom: calc(#{$val / 2} + env(safe-area-inset-bottom)); /* no */
}

注意!!!
1、默认值为0px,不是0,原因是calc不支持与0计算。
2、小程序单位为rpx,一般都会转换为rpx,但是calc不支持,所以不允许转换,保持px。

参考文档:苹果官方文档

最后一次编辑于  2019-10-11  
点赞 14
收藏
评论

5 个评论

  • Xbigfat
    Xbigfat
    2020-12-20

    来评论留个眼,这个有用,否则没法动态计算margin-bottom的值

    2020-12-20
    赞同
    回复
  • 🛺
    🛺
    2020-11-26

    6666

    2020-11-26
    赞同
    回复
  • 光与风的颂
    光与风的颂
    2020-09-29

    这个constant和env兼容ipx的方案不是只有使用viewport-fit=cover的meta标签下才会生效吗?

    小程序里也可以直接用这个方案,不用meta标签吗?

    2020-09-29
    赞同
    回复 2
    • Benjamin
      Benjamin
      2021-01-04
      小程序可以使用
      2021-01-04
      回复
    • 🤨🤪
      🤨🤪
      2021-01-04
      我就说嘛,难道这两年白写了
      2021-01-04
      回复
  • 涛々
    涛々
    2020-02-14

    calc是支持计算 rpx单位的吧 我一直用 calc(100% - 10rpx 这样来使用),好像也没啥问题

    2020-02-14
    赞同
    回复 1
    • Benjamin
      Benjamin
      2021-01-04
      已测试可行,我改下文档。忘了是否当时没有测试完整。
      2021-01-04
      回复
  • 晴天
    晴天
    2020-01-20

    666

    2020-01-20
    赞同
    回复
登录 后发表内容