CODEWITHSUNDEEP
androidioshtml
Matthew Layton
Matthew Layton

Reputation: 42229

HTML5 full-screen mobile apps

In my HTML5 app I have the following meta-tags to allow the app to display as a full-screen app:

    <meta name="viewport" content="minimal-ui, width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

    <link href="~/images/icons/logo/touch-icon.png" rel="apple-touch-icon" />
    <link href="~/images/icons/logo/touch-icon.png" rel="apple-touch-icon" sizes="76x76" />
    <link href="~/images/icons/logo/touch-icon.png" rel="apple-touch-icon" sizes="120x120" />
    <link href="~/images/icons/logo/touch-icon.png" rel="apple-touch-icon" sizes="152x152" />
    <link href="~/images/icons/logo/touch-icon.png" rel="apple-touch-icon" sizes="180x180" />
    <link href="~/images/icons/logo/touch-icon.png" rel="icon" sizes="192x192" />
    <link href="~/images/icons/logo/touch-icon.png" rel="icon" sizes="128x128" />

But whenever I click a link in the app, it goes back into the browser, and brings back the browser bars. How do I prevent this?

Tested on Safari for iOS only - but tagged with android for a complete solution

Upvotes: 3

Views: 530

Answers (1)

Varsha
Varsha

Reputation: 966

1) Go through this link.. Hope this will help you. https://gist.github.com/kylebarrow/1042026

2) Try out this - (Works in iOS 6.1, 8.0.2)

$(document).ready(function(){
    if (("standalone" in window.navigator) && window.navigator.standalone) {
      // For iOS Apps
      $('a').on('click', function(e){
        e.preventDefault();
        var new_location = $(this).attr('href');
        if (new_location != undefined && new_location.substr(0, 1) != '#' && $(this).attr('data-method') == undefined){
          window.location = new_location;
        }
      });
    }
});

3) Ben Nadel Blog is really good regarding same issue. https://www.bennadel.com/blog/2302-preventing-links-in-standalone-iphone-applications-from-opening-in-mobile-safari.htm

4) Add this in the <head> section of your site!

    <script type="text/javascript">
            (function(document,navigator,standalone) {
                // prevents links from apps from oppening in mobile safari
                // this javascript must be the first script in your <head>
                if ((standalone in navigator) && navigator[standalone]) {
                    var curnode, location=document.location, stop=/^(a|html)$/i;
                    document.addEventListener('click', function(e) {
                        curnode=e.target;
                        while (!(stop).test(curnode.nodeName)) {
                            curnode=curnode.parentNode;
                        }
                        // Condidions to do this only on links to your own app
                        // if you want all links, use if('href' in curnode) instead.
                        if('href' in curnode && ( curnode.href.indexOf('http') || ~curnode.href.indexOf(location.host) ) ) {
                            e.preventDefault();
                            location.href = curnode.href;
                        }
                    },false);
                }
            })(document,window.navigator,'standalone');
    </script>

Upvotes: 1

Related Questions