I love the idea of full-screen web apps, and it’s one of the little perks you get when using iOS. Last night I added a simple line of code that enables that for this very site.
You simply add:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
The content=”black” part sets the status bar black, however you can change that if you want. There’s a lot more on this in Apple’s documentation.
There’s one annoying caveat though. Once you “Add to Home Screen” and go to this website, anytime you tap a link it boots you out into Safari proper — thus negating the perfectly awesome full-screen mode.
I believe full-screen mode was ideally meant for web apps that are truly standalone. In other words, not content that requires frequent navigation between pages.
Since I couldn’t find a fix for this on my own, I figured I’d ping my fellow nerds on Twitter. I was fortunate to receive a lot of helpful responses, and I want to give credit to @mmhd for linking me to a javascript solution.
@ZeroDistraction gist.github.com/1042026
— Moeed Mohammad (@mmhd) January 9, 2012
Now that I have made the necessary changes, you can freely tap on any link that’s inside of this website without having to leave the page you’re on.
Here’s what it looks like now in full-screen mode:
