Skip to main content

安全区域

padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

通过 JavaScript 获取刘海屏安全区域高度的方式​

想在 JavaScript 中读取 env 函数值，需要使用 css 自定义属性（变量）

首先设置：

:root {
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}

然后可以在 JavaScript 中，通过以下方法，读取到 css 自定义变量

getComputedStyle(document.documentElement).getPropertyValue("--sat");

链接​