根据“能力嗅探”检测当前是否是刘海屏，并提供适配工具。
在 npm 安装
npm install --save enable-safe-area在 html 设置 viewport-fit=cover
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, viewport-fit=cover">在入口引入嗅探脚本
import 'enable-safe-area';样式适配支持两种方式
less
@import "~enable-safe-area/enable-safe-area";
.selector {
.safe-area-value(padding-bottom; bottom; 5PX);
}sass
@import "~enable-safe-area/enable-safe-area";
.o-number-keyboard {
@include safe-area-value(padding-bottom, bottom, 5PX);
}最终效果
<html enable-safe-area data-dpr="1" style="font-size: 37.5px;">[enable-safe-area] .selector[data-v-2518f88f] {
padding-bottom: calc(constant(safe-area-inset-bottom) + 5PX);
padding-bottom: calc(env(safe-area-inset-bottom) + 5PX);
}
[enable-safe-area][data-dpr="1"] .selector[data-v-2518f88f] {
padding-bottom: calc(constant(safe-area-inset-bottom) + 5PX);
padding-bottom: calc(env(safe-area-inset-bottom) + 5PX);
}
[enable-safe-area][data-dpr="2"] .selector[data-v-2518f88f] {
padding-bottom: calc((constant(safe-area-inset-bottom) * 2) + 5PX);
padding-bottom: calc((env(safe-area-inset-bottom) * 2) + 5PX);
}
[enable-safe-area][data-dpr="3"] .selector[data-v-2518f88f] {
padding-bottom: calc((constant(safe-area-inset-bottom) * 3) + 5PX);
padding-bottom: calc((env(safe-area-inset-bottom) * 3) + 5PX);
}