:root {
--safe-area-inset-top: 0px;
--safe-area-inset-right: 0px;
--safe-area-inset-bottom: 0px;
--safe-area-inset-left: 0px;
--safe-area-inset-constant-top: 0px;
--safe-area-inset-constant-right: 0px;
--safe-area-inset-constant-bottom: 0px;
--safe-area-inset-constant-left: 0px;
}
@supports (top: env(safe-area-inset-top, 44px)) {
:root {
--safe-area-inset-top: env(safe-area-inset-top, 44px);
--safe-area-inset-right: env(safe-area-inset-right, 34px);
--safe-area-inset-bottom: env(safe-area-inset-bottom, 34px);
--safe-area-inset-left: env(safe-area-inset-left, 34px);
}
}
@supports (top: constant(safe-area-inset-top)) {
:root {
--safe-area-inset-constant-top: constant(safe-area-inset-top);
--safe-area-inset-constant-right: constant(safe-area-inset-right);
--safe-area-inset-constant-bottom: constant(safe-area-inset-bottom);
--safe-area-inset-constant-left: constant(safe-area-inset-left);
}
}
@supports 来实现。
、、
js 判断
window.CSS && CSS.supports('padding: env(safe-area-inset-top)')
标签：constant,area,样式,top,safe,--,inset,添加,css From： https://www.cnblogs.com/beileixinqing/p/18572441