I have finished my Next application and decided to test it on my iPhone, when I open Inspector on my web browser everything works fine, but when I open it on iPhone it is not working well until i manually hide toolbar, when it is not hidden it cuts off about 10% of bottom part of my application. Can I somehow hide toolbar via my Next application when user lands on page.
#Hiding Safari's toolbar on iPhone
turbid belfry
little charm
No, you need to shrink your UI to fit the available space. Look at svh instead of vh
little charm
It depends on your app, how are you sizing the height of your app?
(Or accept that devices have different heights and that is why they invented scrolling)
turbid belfry
I have single page application It has container div that has display: flex, and height: 100vh
little charm
then try height: 100svh, but svh is not supported on all browser, so you might have to look into how you want to handle that
turbid belfry
okay, I will try to explain one more thing
while I am on that landing page when I hit let's say 90% of the page it stops for a moment and then i scroll one more time and then it goes to the end fully, 100%. After that I open up a modal and again scroll up to the bottom and hit 90% stop there and that's it can't move anymore.
I hope that I explained well the situation.