How to detect mobile notch?

Question

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 ?

https://stackoverflow.com/questions/47226824/iphonex-and-notch-detection — Lalji Tadhani, Dec 14 '18 at 04: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, Dec 14 '18 at 04:55
https://stackoverflow.com/questions/46318395/detecting-mobile-device-notch/46362263 — Lalji Tadhani, Dec 14 '18 at 04:58

score 8 · Answer 1 · edited Dec 14 '18 at 05:01

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

edited Dec 14 '18 at 05:01

Pradeep

9,667
13
27
34

answered Dec 14 '18 at 04:52

puspak saha

99
8

How to detect mobile notch?

1 Answers1