2

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?

Improve this question

2 Answers 2

Reset to default
3

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.

Improve this answer
2
  • Do you have a link describing this process handy?
    – Nicholas Pappas
    Commented Apr 24, 2013 at 20:27
  • I use Apple Configurator (and you can see a sample profile file here ) but you can also use Windows or Mac version of the iPhone Configuration utility. It's documented on page 75 of the Enterprise Deployment Guide.
    – bmike ♦
    Commented Apr 24, 2013 at 20:46
1

I had the exact same trouble, though using the window.navigator.standalone attribute, code fixes it all.

<script type="text/javascript">
$(document).ready(function(){
        // iOS web app full screen hacks.
        if(window.navigator.standalone == true) {
                // make all link remain in web app mode.
                $('a').click(function() {
                        window.location = $(this).attr('href');
            return false;
                });
        }
});
</script>
Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .