Nearly full-screen web pages for mobile Safari

• ~200 words • 0.8 minute read

Today I noticed that Squarespace's site looks particularly nice on the iPhone.  The address bar is minimized unless explicitly tapped and the footer bar with icons for navigation and bookmarks is completely invisible. I wondered how they did that and if it was something I could quickly drop into a project I'm currently working on.

I thought it might be some update to the scrollTo trick from iOSes past, but eventually I landed on this Stack Overflow question: Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch. It turns out there's a new key called minimal-ui you can include in your viewport meta tag that will make your web pages more or less full-screen in mobile Safari on iOS7:

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

That was easy!

This is the only reference I could find on Apple's own site:

https://developer.apple.com/library/ios/releasenotes/General/RN-iOSSDK-7.1/

And I only found it because I was specifically searching for it. It's not listed here, as of this writing, where all the other viewport properties can be found.

UPDATE: Doesn't work on iPad, as of this writing.