Staying in full screen mode on the iPhone from page to page

fullscreen-webapp-iphone

It is incredibly easy to make any website capable of being saved as a full screen web app on the iPhone, iPad or iPod Touch. You may have come across a tutorial teaching you how to add a couple of meta tags in the head of your html and now you can save your website to your phone’s desktop and have it launch in full screen mode without the browser chrome.

The Problem

At this point, you are probably really excited to have added about 100 pixels of screen real-estate to your website. As you start to play around, you click on a link and what’s this? It switches from your full screen mode to Safari. You hurry and switch back to the full screen app and try it again. Once more, it opens the new page in Safari.

This is one thing that I had a hard time finding a solution to on the internet. How to keep your experience of the web app in the full screen mode without it trying to open every link in Safari.

Good news, I found some javascript that will fix this problem. Include this script below on every page of your site and it basically will grab all the anchor tags on the page and it handles the window location, which will load the new page and keep you in the full screen mode.

The Code

function fullscreen() {
	$('a').click(function() {
		if(!$(this).hasClass('noeffect')) {
			window.location = $(this).attr('href');
			return false;
		}
	});
}

fullscreen();

Notes

One thing to note about this method, is if you have a link that points to a file that you want the user to download, like a PDF, you should add the class ‘noeffect’ to the anchor tag to avoid problems.

If you visit the demo link on an iPhone or iPad and save it your homescreen. Launch it and click on the navigation links. You will see that it keeps you in the fullscreen mode.

Demo

Tags: , , , , ,

32 Responses

  1. learn more says:

    Eric Hoffer: “It is when power is wedded to chronic fear that it becomes formidable.”

  2. zee says:

    Hi Mike…great tip. This is what I need and have been looking for, but it conflicts with my scrollTo script that gives a nice scroll animation on links. The scrollTo script binds to a few classes. The script you wrote about works fine, but the scrollTo plugin won’t play nice at the same time!

  3. Chozen says:

    Doesn’t work

    • MDavidWalker says:

      Hmm…what’s not working? I just tried the demo on my phone and it seems to be working fine for me.
      I know if you have a lot of javascript to load and you try and click a link before all the script has loaded, then it won’t work.

      • Chozen says:

        I’ve been trying everything, but I just can seem to get it to work.

        the site I’m trying to get it to work on is http://www.SiteBuilderTips.com

        Could you take a look and let me know what I’m doing wrong?

        Thanks.

        • Echo says:

          Very cool! Works like a charm! Is there any way you could write a script to trick wbteiess into thinking an iPhone is not a mobile device? Some mobile sites are severely limited and don’t provide a link to the full site. Thanks!

  4. Jens says:

    Is there a way after re-open on the taskbar to come out on the last page that was opened?

    Now it open always the first Site…

  5. Jens says:

    by the way… great WORK!

  6. jens says:

    there is a soloution:

    it dosent work for me, because i have a member login.. but im working on it…

    http://appcropolis.com/restore-last-visited-page-using-cookies/

  7. Chantal says:

    Thanks! Great tip, this is good for app prototyping with html 🙂

  8. Muhammadibn says:

    Hi, Really good tip.

    I have a web app that i’ve configured to force open pdf docs in the web app but the problem i’m having is that there currently no way of going back once in the pdf unless the use reopens the webapp.

    I wanted to know if it was possible to have some sort of navigation when viewing pdf docs in a web app.

    Thanks

  9. Btw, thx for a nice script and writeup!

  10. A guy from Paris says:

    Well, I have to say thank you. I search for the answer you provide for hours. So, you are kind a my hero for the day.
    (By the way, for those who have trouble using this code, for me, I had to put the code at the end of the page).

  11. KB says:

    Hi, I’m interested in doing this, but having some trouble implementing.

    Where does this code go on the page?

    Does it need to be enclosed in some kind of </script? tag?

    On a WordPress site, can I simply put this code into the header.php file, or how do you implement in WordPress?

    Thank you.

    • MDavidWalker says:

      You could put it in your header.php file. If you do that, you will have to have it enclosed in some script tags.
      Or you could put it in an external javascript file that you link to your header.php.
      If this doesn’t answer your question I can provide an example.

  12. […] Staying in full screen mode on the iPhone from page to page MikeTheIndian […]

  13. Still doesnt work for me tried a thousand codes like this one and it didnt work maybe its my site.
    http://visionjoveninc.com/app/?id=1005

  14. William says:

    What does that code actually do? Wow, crazy!

    Thanks for this though!

  15. William says:

    Does this only work with Jquery?

  16. Elvis says:

    I just tested the demo on my iPhone, and it doesn’t show any of the pages in full screen.

  17. Made little change, now the middlemousebutton wil still work on desktops.

    This code is only executed in webapps…

    Thanks for your code! Hope you like the addition.

    Kind regards

    Martjan

    /* Author: MikeTheIndian.com

    */

    $(document).ready(function() {

    function fullscreen() {
    $(‘a’).click(function() {
    if(!$(this).hasClass(‘noeffect’)) {
    window.location = $(this).attr(‘href’);
    return false;
    }
    });
    }
    /* deze code alleen uitvoeren in een webapp venster */
    if ((“standalone” in window.navigator) && !window.navigator.standalone)
    {
    fullscreen();
    }

    });

  18. Didn’t work after all. 🙁

    My iPad cache made it look like it worked. So my desktop loaded new .js and my iPad the old one…

    I’ll keep trying. If correct i’ll post the newer version.

  19. Martjan den Hoed says:

    This works:

    /* Author: MikeTheIndian.com

    */ Modified: Koen

    $(document).ready(function() {

    function fullscreen() {
    $(‘a’).click(function() {
    if(!$(this).hasClass(‘noeffect’)) {
    window.location = $(this).attr(‘href’);
    return false;
    }
    });
    }
    /* deze code alleen uitvoeren in een webapp venster */
    if ((“standalone” in window.navigator) && window.navigator.standalone)
    {
    fullscreen();
    }

    });

  20. Alwin says:

    How it works i dont know how to use this i’m a noob

    please help me

    • Tom Newman says:

      Simple solution that works for me…

      I have not used this code on my site, but I tested on the test page and it seems to work.

      Place this in meta tag:

      /* line below is optional and can be edited as needed */

      and this in tag at the end of the page before the tag

      // Hide browser menu.
      (function() {
      setTimeout(function(){window.scrollTo(0,0);},0);
      })();

      • Tom Newman says:

        …it seems that the tags are lost somewhere:/ …

        …I’ll try again in plain English 🙂

        Place this in meta tag:

        meta name=”apple-mobile-web-app-capable” content=”yes”

        /* line below is optional and can be edited as needed */

        meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no”

        and this in script tag at the end of the page before the closing body tag

        // Hide browser menu.
        (function() {
        setTimeout(function(){window.scrollTo(0,0);},0);
        })();

      • Tom Newman says:

        …one more thing

        Page content must be 100px greater than the size of window. In other words, must be enough content on the page to make the page scrollable down a minimum of 100px, (height of the address bar on the iPhone, not tested on iPad) which should not be a problem for most sites.

Leave a Comment