H5适配iphoneX手机下的黑色横条问题

在h5页面的底部tabbar栏中引入class：footer

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe- 
  area-inset-bottom)) {
  .footer {
      padding-bottom: calc(constant(safe-area-inset-bottom) / 2);
      padding-bottom: calc(0px + env(safe-area-inset-bottom) / 2);
   }
}

safe-area-inset-bottom：距离屏幕下边框安全距离；
safe-area-inset-top：距离屏幕上边框安全距离；
safe-area-inset-right：距离屏幕右边框安全距离；
safe-area-inset-left：距离屏幕左边框安全距离；

在IOS11使用：
padding-top：constant(safe-area-inset-top);
padding-bottom：constant(safe-area-inset-bottom);
padding-left：constant(safe-area-inset-left);
padding-right：constant(safe-area-inset-right);

在IOS11.2beta及其以后：
padding-top：env(safe-area-inset-top);
padding-bottom：env(safe-area-inset-bottom);
padding-left：env(safe-area-inset-left);
padding-right：env(safe-area-inset-right);

注：默认值为0px，而不是0，是因为calc不支持与0计算