Because the top and bottom bars on iOS Safari slides up and down when scrolling, I was having some difficulty coding a full-screen page for it. $(window).height() on only gets the initial height upon page load, which includes the full header and footer bars. $(window).resize() wasn’t triggering when I scroll, either.

I ended up finding two possible approaches to the problem:

1. Use the minimal-UI viewport declaration for iOS

This is convenient because it doesn’t involve any JS work-arounds or extra code, except for one line of HTML in the header. It loads the screen without the expanded URL header bar and with the hidden bookmarks bar on the browser window. However, there are some cons for this approach:

Hiding the bottom bar makes it harder for people to save or bookmark the site. It’s not the default view, so some people may not realize that clicking on the site title or URL on the top of the screen will restore the hidden nav bars.

2. Use Javascript to detect the bar state and redraw the page 

The second method may be a bit of work since we’re adding JS to the page, but it will keep the default UI and I think this is better when it comes to bringing a web experience that your visitors are familiar with.

Of course, you may use what you think is best for your site or web app. Perhaps there are also other work arounds that I wasn’t able to find.