如何在h5和小程序中适配iphone X全面屏底部的安全区

1、第一步： h5需要设置页面属性：

  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover">

2、在属性样式上加一段判断覆盖样式：
示例代码：

.load-more {
  color: #0080ff;
  padding-bottom: 32px;
}
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  .load-more {
    padding-bottom: calc(32px + constant(safe-area-inset-bottom));
    padding-bottom: calc(32px + env(safe-area-inset-bottom));
  }
}

解释：.load-more 有一个正常的样式padding-bottom: 32px;

这个时候，底部需要对iPhoneX进行适配，那么需要把padding-bottom在原有的32px上 + 安全距离
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom))
这个就是用来判断是不是ios系统独有的。是就会进到里面。

然后通过calc 把安全距离加上 就可以了。

说明一下，不是全面屏的手机 譬如iphone6 也会走进@supports 这个函数内去。只是env(safe-area-inset-bottom) 这个具体的值，iphone6 和 iphoneX 这种全面屏不一样而已。