使用JavaScript获取iPhone X安全区域

Question

我们在CSS中有safe-area-inset-left，safe-area-inset-right，safe-area-inset-top和safe-area-inset-bottom，但我们如何使用JavaScript获取这些值？

Answer 1

来自https://benfrain.com/how-to-get-the-value-of-phone-notches-environment-variables-env-in-javascript-from-css/。您可以在链接中找到更多上下文。

在 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);
}

在 JS 中

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