Получение безопасной зоны iPhone X с помощью JavaScript

У нас есть safe-area-inset-left, safe-area-inset-right, safe-area-inset-top и safe-area-inset-bottom в CSS, но как мы можем получить эти значения с помощью JavaScript?


person Alice Chan    schedule 04.11.2017    source источник
comment
@Scott Как это дублируется? У меня тот же вопрос, и дублированная ссылка не дает решения этого вопроса.   -  person Bryan Chen    schedule 01.02.2018


Ответы (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")
person Kaya Toast    schedule 16.02.2021