How to completely hide the navigation bar in iPhone / HTML5

html mobile iphone-standalone-web-app

Luc · May 15, 2011 · Viewed 112.7k times · Source

I'm really new to HTML5 for mobile. I use jQuery Mobile for my current app and I have some problems hiding the navigation bar.

I found this site: http://m.somethingborrowedmovie.warnerbros.com/. (I do not paste this link to promote the movie.)

I was just amazed by this HTML5 site. Does anyone have any idea of the method used to hide the navigation bar?

The menu is also really well done. Is there any framework to build apps like this one?

Answer

Try the following:

Add this meta tag in the head of your HTML file:

<meta name="apple-mobile-web-app-capable" content="yes" />

Open your site with Safari on iPhone, and use the bookmark feature to add your site to the home screen.
Go back to home screen and open the bookmarked site. The URL and status bar will be gone.

As long as you only need to work with the iPhone, you should be fine with this solution.

In addition, your sample on the warnerbros.com site uses the Sencha touch framework. You can Google it for more information or check out their demos.