How to deal with mobile notch?

Hi, I have an app like my image 1 below, everything looks good. The problem is that when the app is launched on a mobile that has a notch, it creates a layout problem, as you can see in image 2. And I don’t want a status bar because some pages (like the image 3) need to cover the entire screen.

I can easily solve this by adding a margin at the top of the content of image 2, but the problem is that the same application is launched on both mobiles. What I can do is detect iPhone X in JS using Framework7 mobile detection methods, and add a CSS class in case there is a notch. Or use the media queries to add a margin on iPhone X. The problem is that not only iPhone X have a notch :sweat_smile:

Ideally there should be a method to detect mobiles with a notch (and return the height of this notch would be even better :sunglasses:) But is this possible? If not, what is the better way to deal with this problem? Thanks

edit: btw, I know it’s not a Framework7-specific issue, but I can’t find a solution anywhere else, so I try here

In my case I tried this in the following link I created…