企微h5页面兼容ios底部小黑条

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

2.body,html,.parent-wrap {
  position: absolute;
  width: 100%;
  left: 0;
  top:0;
  bottom: 0;
  right: 0;
  height: 100vh;
  overflow: hidden;
  }

设置这里是为了解决撑开小黑条时页面存在滚动条问题

/*2.如需无内容时撑开页面到最底部，可以设置最外部盒子设置min-height: 100vh;（100vh包含底部小黑条高度在内）*/

3.需要定位到底部的元素设置

    position: fixed;

    bottom: 0;

    left: 0;

    width: 100%;

    height: calc(70px + constant(safe-area-inset-bottom));

    height: calc(70px + env(safe-area-inset-bottom));

    padding-bottom: calc(11px + constant(safe-area-inset-bottom));

    padding-bottom: calc(11px + env(safe-area-inset-bottom));

注意：使用safe-area-inset-bottom时一定要在meta里设置viewport-fit=cover