iPad website fullscreen in Safari

Question

I am trying to get a website that runs fullscreen for all pages, I have looked over here: iPad WebApp Full Screen in Safari and followed that and my index page fills the screen just nicely, but whenever I click a link to another page even though that page is all setup with the meta tags it pulls the chrome bar back in and all the alignment goes out.

There must be a way or is that a limitation of safari that will be fixed in a later revision.

any luck finding a solution-- I tried several, nothing works-- — Scott Kramer, Jun 17 '11 at 17:52

score 4 · Answer 1 · answered Sep 14 '11 at 04:06

4

I have written a jQuery plugin for this exact purpose: https://github.com/mrmoses/jQuery.stayInWebApp

Include the plugin somehow , then run it like so:

$(function() {
    $.stayInWebApp();
});

By default it will attach to all <a /> elements. You can pass a different selector to attach it to specific links. For example, $.stayInWebApp('a.stay'); will attach to all links that have class="stay"

Because its so small, I usually just copy the minified version into one of my other external javascript files to include it, rather than having to add another external js reference.

Also available on plugins.jquery.com

answered Sep 14 '11 at 04:06

Alpha Codemonkey

3,242
21
26

it works for me, on multiple projects. please provide more detials – Alpha Codemonkey Sep 27 '11 at 20:35
Definitely works. Just put the function inside a ready function like so: $(document).ready(function(){ $.stayInWebApp(); }); I have just added that to the script so I don't have to include another js file. – Whiskey Mar 19 '13 at 10:19
Unfortunately this code has no open source license or otherwise, and it therefore takes the default status of being copyrighted. It is a potential breach of copyright to use the code in it's current form. – muzzamo Jul 19 '13 at 01:58
This is pretty useful thanks for sharing moses. I found I often want to keep absolute urls with the same destination so I changed this line in the plugin: if (!dest.match(/^http(s?)/g) || dest.lastIndexOf(location.origin, 0) === 0) { – SemanticZen Nov 23 '14 at 09:53

score 1 · Answer 2 · answered Dec 13 '10 at 20:22

You can try something like this:

if ((navigator.userAgent.indexOf('iPad') != -1)) {
    // for standalone (app) fulscreen mode
    if (window.innerHeight == 748 || window.innerHeight == 1004) { 
        var a = document.getElementsByTagName("a");
        for (var i = 0, len = a.length; i < len; i++) {
            if (a[i].getAttribute("href");) {
                a[i].onclick = function() {
                    window.location = this.getAttribute("href");
                    return false;
                }
            }
        }
    }
}

iPad website fullscreen in Safari

2 Answers2