iPhone 从 X 开始使用全面屏，浏览网页的时候底部会有一条遮住可视区域，为了避免H5页面被iPhone底部条遮住，可以采取以下方案。

iPhone自适应底部

首先，iPhone自带了屏幕安全区域的处理策略，可以使用constant和env两个css特性来获取底部的安全距离，然后通过@supports来做兼容，通过覆盖样式对底部单独处理：

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
  /* 如果浏览器支持安全区域底部距离，
     则可以为需要吸底的元素单独规定样式，
     如果该 class 还有其它样式，要将本段代码放在其它样式后面！
     取值如下：
  */
  .class-name {
    padding-bottom: constant(safe-area-inset-bottom);  /* 当然也可以写 margin、bottom …… */
    padding-bottom: env(safe-area-inset-bottom);
  }
}

判断iPhone型号

因为以上CSS方法在iOS微信浏览器中不生效，需要手动判断iPhone型号，然后就可以在微信浏览器中，针对全面屏的iPhone做单独处理。

注意，因为微信在网页切换时，底部会出现导航条，目前还没有办法让H5感知是否出现导航条，所以对导航条无法处理，我们通常的做法是，不管底部是否出现微信自带导航，在iPhone的微信中浏览H5，底部永远留出20px安全区域。

以下为全面屏iPhone判断方法：

// 判断iPhone型号
// https://feizhaojun.com/?p=2650
var ua = window.navigator.userAgent;
var deviceScreen = window.screen.width + ',' + window.screen.height;
var iPhoneScreen = [
  '375,812',  // X、Xs、11 Pro
  '414,896',  // XR、11、Xs Max、11 Pro Max
  '390,844',  // 12、12 Pro
  '428,926'  // 12 Pro Max
];
if (ua.indexOf('MicroMessenger') > -1 && !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) && iPhoneScreen.indexOf(deviceScreen) > -1) {
  // do something for iPhone 全面屏
}

示例页面

https://feizhaojun.com/demo/safe-area.html