全面屏手机页面底部适配

第一步: 页面设置viewport-fit=cover

第二步: 引入一下sass

/* 修复ios全面屏底下横线margin版 */ 
@mixin fixIosBottomM ($margin: null) {
  @include fixIosBottomBase(margin-bottom, $margin)
}

/* 修复ios全面屏底下横线padding版 */ 
@mixin fixIosBottomP ($padding: null) {
  @include fixIosBottomBase(padding, $padding)
}

/* 修复ios全面屏底下横线position bottom版 */ 
@mixin fixIosBottomB ($bottom: null) {
  @include fixIosBottomBase(bottom, $bottom)
}

/* 修复ios全面屏底下横线height版 */ 
@mixin fixIosBottomH ($height: null) {
  @include fixIosBottomBase(height, $height)
}

/* 修复ios全面屏底下横线base版 */ 
@mixin fixIosBottomBase ($key, $value: null) {
  @if $value == null {
    #{$key}: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
    #{$key}: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
  } @else {
    #{$key}: calc(constant(safe-area-inset-bottom) + #{$value}); /*兼容 IOS<11.2*/
    #{$key}: calc(env(safe-area-inset-bottom) + #{$value}); /*兼容 IOS>11.2*/
  }
}