I'm building a full-page web app and it works beautifully in chrome, but in safari mobile it goes wonky. This is because safari mobile has the navigation bar on top and another bar on the bottom. How can I make my page account for them? I've been researching this for weeks and have tried every suggestion. I'm hoping someone here can help.
How do you get the height with and without the top and bottom bars? In truth, I don't really want either bar, but as far as I know there isn't a way to get rid of them except for the user to add the app to their home screen. If my user doesn't have it added to their front page yet, I have to account for the height of the bars. The reason I have to account for them is my page has a map, which must have a fixed height in order to show, it can't be flex. I also have buttons and user controls on both the top and the bottom of the screen, which must always be visible.
What is happening now is that sometimes the content jumps UNDER the navigation bar and therefore those controls become unusable.
I want to set the page height to be the height BETWEEN the nav bar, and status bar, if they are showing, the AVAILABLE screen height. Looking for either a css or javascript solution.
Can anybody help?
Testing with ios 11.2.6.
This whole thing absolutely stinks. I don't really have a solution - don't think anyone does - but here's what I know about it.
CSS 100vh is the maximum height Safari's viewport can be, i.e. with bars hidden. So if the bars are showing, it's too big and things might go under the bars like you're seeing.
CSS position: fixed; top: 0; bottom: 0 fits to the current size of the viewport without bars and will change when the bars show and hide, so it's a lot more useful. But you can't make everything position: fixed.
window.innerHeight is the same as 100vh so that's not much good.
So the only way I know to get the correct height from JS is to make a position: fixed; top: 0; bottom: 0 element and measure it. Then you can apply that height back to other elements to make them fit on the screen, oh, but the height will change when the bars show or hide. Heck.
Sometimes it's best to go nuclear and put the whole site in a position:fixed div, and overflow: hidden on the body, so that the document never scrolls and the bars never hide.
If the body is overflow: hidden, document.documentElement.clientHeight also gets the height without bars.
The boys at Safari HQ say this is all by design and they intend to keep it this way, and Chrome will be implementing it soon too. What a mess.