第一步: 页面设置viewport-fit=cover
<meta name="viewport" content="width=device-width, initial-scale=1.0, 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*/
}
}
