iphoneX的适配

iphoneX的适配

核心就是让底部元素的after占位安全区

1.index.html修改meta

  <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.适配的less

@media only screen and (width: 375px) and (height: 690px){
  body {
    padding-top: constant(safe-area-inset-top);   //为导航栏+状态栏的高度 88px
    padding-left: constant(safe-area-inset-left);   //如果未竖屏时为0
    padding-right: constant(safe-area-inset-right); //如果未竖屏时为0
    padding-bottom: constant(safe-area-inset-bottom);//为底下圆弧的高度 34px
  }
}
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {   //适配iphoneX的类名
  .iphoneXFooter {    //底部固定定位那个标签加这个即可 透明色
    padding-bottom: constant(safe-area-inset-bottom);  //适配低高版本的iOS
    padding-bottom: env(safe-area-inset-bottom); //适配低高版本的iOS
    &:after{
      position: fixed;
      content: '';
      left: 0;
      bottom: 0;
      width: 100%;
      height: constant(safe-area-inset-bottom);
      height: env(safe-area-inset-bottom);
      background:transparent;
    }
  }
}