current position:Home>How to obtain the height of bangs screen safety area through JavaScript

How to obtain the height of bangs screen safety area through JavaScript

2021-08-25 22:13:50 A Xiao

stay css in , Can pass env() The function reads the boundary distance value defined by the safety zone specification , such as :

margin-top: env(safe-area-inset-top);

But this method can only be used for css in ,JavaScript It cannot be read directly env Functional .

Want to be in JavaScript Read from env Function value , Need to use css Custom properties ( Variable )

The first set :

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

Then you can go to JavaScript in , By , Read css Custom variable

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

copyright notice
author[A Xiao],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210825221347724J.html

Random recommended