I am working on a small web app that runs on controlled iPad (i.e., both the hardware and content is in our office and never leaves). I would like to hide the URL bar in this app. I've placed the following tag at the top of each page:
<meta name="apple-mobile-web-app-capable" content="yes" />
Once "installed" to the iPad's home screen the first page looks as I expect it. However, the first click opens a new page in Mobile Safari and the URL bar returns.
Is there a way I can keep the fullscreen "web app" feel at all times?
Best Answer
I attack this problem by distributing the web app as a configuration profile. Rather than having people tap the mobile Safari button to add the app to the home screen, you have them download the profile file OTA from the web server.
They will need to approve the profile installation, but then you can control the icon and force the full screen attribute so that your users don't see Mobile Safari's chrome.
If your web content is getting opened in Mobile Safari (like the web content here, you may need to try playing with all links within the app to be relative to the site or program things to exist in an offline database rather than being full URL that cause the fullscreen safari to think it needs to open a linked page in the normal Mobile Safari view).
I also use this article on developing for iPad - perhaps you need to set the viewport and have a few other items to ensure that the touch interface is used to navigate rather than opening a new URL.