is there a way to know the height of the non safe area (top and bottom)? I actually want to find out if there is a notch on the screen so I can make the adjustment according. thanks!
can you explain more how you want to do that?
@Dimos_Vamvourellis meaning?? if I disable the safe area, I can use/control the top and bottom area (like setting the color). But the issue is I don’t know if there is a notch or not, so I can’t position the top and bottom elements to avoid those hidden behind the notch.
For now I just set the top padding to 40 for the top element but it looks odd (shifted downward) for devices that don’t have a notch or when view it from web.
currently there is no variable to indicate if the notch exists or not, but you could set a container (aproximatelly45px) with a visibility function, where if the screen width is greater than 700px, the container will disappear in that way you can distinguish a smartphone from tablet or pc. I also made an option for the user to disable it in my apps settings for smartphones/tablets without a notch.
Not about for figuring out if it is running on desktop or mobile.
I need to distinguish if the user is running it on e.g. iPhone X (have notch), iphone 8 (no notch), or from the browser on a mobile phone (no notch)…
ohh ok, about that, you can only use the ready made safe area option or give the user to disable it.