I have a web 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 can not use a "safe area" because some of my pages need to be stuck on top, like the image 3.

I can easily solve this by adding media queries to add a padding above the content on iPhone X, but the problem is that not only iPhone X have a notch.

Ideally there should be a JS method to detect mobiles with a notch (and return the height of this notch would be even better) But is this possible? If not, what is the better way to deal with this problem? Do I have to create media queries for every smartphone in the world ?

I have a web 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 can not use a "safe area" because some of my pages need to be stuck on top, like the image 3.

I can easily solve this by adding media queries to add a padding above the content on iPhone X, but the problem is that not only iPhone X have a notch.

Ideally there should be a JS method to detect mobiles with a notch (and return the height of this notch would be even better) But is this possible? If not, what is the better way to deal with this problem? Do I have to create media queries for every smartphone in the world ?

• javascript
• html
• css
• mobile

Share Improve this question Follow asked Dec 14, 2018 at 4:42 ValdVald 23722 silver badges99 bronze badges 3

• stackoverflow./questions/47226824/… – Lalji Tadhani Commented Dec 14, 2018 at 4:54
• @LaljiTadhani I explained that I had no problem detecting an iPhone X. What I want is to detect all phones with a notch – Vald Commented Dec 14, 2018 at 4:55
• stackoverflow./questions/46318395/… – Lalji Tadhani Commented Dec 14, 2018 at 4:58

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

HTML::

meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" 

CSS::

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);