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

Rui Toscano

Discussion

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 https://www.showme.com/sh/?h=hoIbjdY.

I hope this helps.

Cheers,

11 Sep 2013

Justin James

MVP

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

12 Sep 2013

Bruce Buttles

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

19 Aug 2016

1 reply

19 Aug 2016

Show thread

Hide thread

Bruce Buttles

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!

19 Aug 2016

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines