[ad_1]
I am making an attempt to create a single web page utility for the net and up to now it has been going nicely.
Sadly, when testing it on an iPhone I spotted that a part of my web site’s contents are hidden beneath the navigation bar of the browser (Safari). Usually, when scrolling down on an internet site that UI factor disappears and makes approach for the content material beneath it to indicate correctly and use the display screen area effectively, however since my website has scrolling disabled (since I am making an attempt to make a single display screen UI) a part of it ends down there.
I’ve observed this solely impacts Safari, and my app works completely on different browsers, even on cellular.
To this point, to resolve this situation I’ve tried to make use of atmosphere variables on CSS like this:
top: calc(100vh - env(safe-area-inset-bottom))
Nevertheless it did not appear to make any distinction.
So what I am asking for is: is there any option to stop this from taking place, maybe loading the web site on fullscreen already hiding the browser’s UI?
For context, right here is the issue:
The a part of the web page that will get hidden (enabled scrolling)
(Additionally, I’ve observed {that a} Wordle clone I usually play (time period.ooo) has managed to drag off what I wished to do, so there’s obtained to be a approach however I have not figured it out by analyzing their CSS ‘-‘)
[ad_2]
