How to hide browser navigation bar on mobile/tablet application (Apple devices)

How to hide browser navigation bar on mobile/tablet application (Apple devices)

  
Hi,

One simple and easy way to improve the experience of a mobile application is  to make it look like a native app.

Since the applications created on the OutSystems platform are web, even if you use a tablet or a smartphone to access the app it will always open on the device web browser, so a simple trick to present and use your application is to create a shortcut to access it on your mobile device and then make sure that the pages rendered by your application do not open new windows when links are accessed.

First step - Make sure the links on your application do not open new windows:
To achieve this you need to include in your eSpace the following javascript code.
 
        $(document).ready(function(){
          $("a").not(".popup").click(function (event) {
            event.preventDefault();
            window.location = $(this).attr("href");
        });
    });
Note: Notice that we are excluding all the objects of "popup" class, this is done to prevent the existing popups to break, so if you have any popups on your application you should add to their existing style the "popup" class in order to mark them to not be affected by the code described above. 

Second step - Apple content capable tag on your application layouts
You should include on your layouts the following tag, this will enable the fullscreen view on Apple devices.

<meta name="apple-mobile-web-app-capable" content="yes" />

Third step - Add a shortcurt to your application on your device
You can check the following link that shows how to do it iOS http://www.showme.com/sh/?h=hoIbjdY.

 I hope this helps.

Cheers,

Thanks! We've done step #2 and step #3, but we didn't have step #1 and it has been causing us a done of problems.

J.Ja

What about for Android devises ... will this meta tag work for them as well - OR - is there another meta for Android?

Bruce Buttles wrote:

What about for Android devises ... will this meta tag work for them as well - OR - is there another meta for Android?

Oh, so I found this tag: mobile-web-app-capable

So, now it works on Android w/Chrome as well.


HOWEVER, both of these only work if you are opening it from a Home shortcut (your step #3).


Sooooo ... how can we make full-screen happen EVEN when the user comes from a URL?


Thanks!