Notch existence variable? (notch on smartphones screen)

Hi there, is there any way to get the information, of whether or not the users phone has a notch (like with newer iphones)

so i can use it to enable or disable visibility of an empty container used for margin?
like shown bellow

I am well aware that it is not what you are asking…
But my personal work around it is to have the per system variables: check the screen width.
And if it is beyond circa 5-600pixels: I have the compensation container set to false as “visible”.
This is because anything over 600 pixels would generally mean that it is either not a tablet nor rotated sideways to layout mode.

I understand that you want the compensating container to simply “not be there” if similarly the notch also is not.
But sadly some phones (In my example the Samsung A12) actually automatically compensate for the notch by adding a split header with notifications and battery status.
Thus you may not suffice with “notch detecting” alone… You may also want to detect (or even remove) any feature that fills the gap in for you

Thanks for the response @Berter_Akyol , in my case i lock the screen so it never goes to landscape mode. Correct me if im wrong but, using your solution, means that if the device is not a tablet, the container will be visible even if the phone doesnt have a notch.

You understand correctly…

If there is or there is no notch: you see the gap shall the width be as of mentioned… :confused:
Not REALLY a solution I know… BUUUT: in a situation where the app is viewed through a tablet/ipad: then even if the application is locked to not rotate… You get to have it without the gap as for had I just locked it: the gap would be pretty much permanent.

In my case: most users are going to be opting for the tablet rather often due to the larger estate it proposes. Usually the goal is creating digital catalogues of their models.

In the end: it depends on your personal choices really.
I too would love to hear if there actually is a way to detect if there is a notch or not. It would streamline matters to the better.

1 Like

hey, if you take a look here, there is a solution to this problem.

but after trying it out it doesnt seem to do anything…

I checked it out myself just now and as you have stated both here and to Mari (Whom is surely a better source for help/information than am I ever) in your link given: it didn’t do anything.

But then I thought it may just be device specific so such: I have the safe-zone pretty much automatically set up in my test phone (Samsung A12) and though I am able to manually set it’s navigation bar on/off… I am not allowed to dismiss the “automatic notch-gapper” that is composed of phone info (Like messages/wifi/battery/date/etc… ) at it’s sides having an empty gap in the center for the camera notch to not be disrupting anything important. My other test phone being a Lenevo does not have so such a precautionary setting. But it also does not have a notch.

Tomorrow I shall check with the Note10 as since that one had a notch in it and though I do not remember if it had also such a setting; that one was opened up to developing. So I should be able to access more of it’s settings to check things out.

So none the less: What I am trying to say is that I am not able to confirm nor dismiss that the safe area does/does not actually work.

The app may just as well be saying “Remove the safe area” while the phone is saying something pretty much like “What safe area?”… I really can not tell as of yet.

All this said… Why don’t you just do a “device OS” check on the visibility of your container you want to use as a notch thingy…
Something like
IF(systemVars.os == "ios", true, false)
having it also check if the width is larger than 450px or not… with an
&& systemVars.dimensions.viewport.width < 450
as above mentioned?

Because statistically: the interference notch is usually on the iphone (Which I can also no currently check if it is doing anything by checking “safe area” on/off)
I only recently added the OS check but to date I opt for the before mentioned method of checking the width.

Thank you for the heads up on the “safe area”… It is valuable info for my part.

1 Like

Hi both, the disable safe area setting only goes into effect when both Navigation header bar and Navigation menu are disabled on Navigation tab. Here are screenshots from my phone:

Safe area enabled:

Safe area disabled:


ohh thats why… so we have to make custom nav menu

What? :confused:

I was just coming here to confirm that it was not “phone” related… But pretty much “standard”. That I had not found a phone that this worked. Al of them had a “safe zone” of sort regardless the settings I went for.

But trusting you know very well what it is you are doing Mari; (And the fact that I prefer the safe zone to be there rather than not) I assume that there is something I am once more messing up and leaving it at that…
It pretty much does actually help to know there is something done about the notch. I honestly had not known.

Thank you for all your time and help…
This has to be the best “in-house feed back” service ever.
You guys are a great help to so many people in countless events!