IOS Tip: Maximizing your screen space with Minimal-UI

In the olden iOS 6 days, on an iPhone you could trigger the Safari browser to hide the URL bar by telling the your website to scroll one pixel when it loads. This would kickstart the Safari browser’s built-in behavior to minimize the URL bar once you started interacting with the page.

A bit hacky? For sure, but it worked, and had become the de facto standard for web developers targeting iOS. Unfortunately the iOS 7 update broke all this. Thanks a lot, Apple! Thankfully enough people must’ve complained because along with the latest 7.1 update, Apple also introduced yet another viewport meta tag.


<meta name="viewport" content="minimal-ui">

“minimal-ui” will hide the top URL bar and footer navigation bar on site load. Fantastic for web apps, potentially good /bad for every day sites, since the back / next page buttons are hidden by default. Since most sites I build at work are usually one pagers, this probably would work fine.

I first stumbled across it in the wild here: http://git.io/2048