Last Updated: November 30, 2021
· Andrej Mihajlov

Fullscreen experience on Mobile Safari

In last couple of months I work on HTML5 canvas games. One of tough challenges in this area is to provide a fullscreen experience that we used to have in native apps.

Safari on iOS 8 hides navigation bars when in landscape. However navigation bars show up if user taps at the top or bottom of screen and there is no way to dismiss them without user scrolling up.

But not everyone aware of this trick.

So to solve this problem I decided to show a help tip when navigation bars appear.

Unfortunately there is no API available to detect navigation bars visibility, but starting from iOS 8, Safari sends onresize events when that happens.

This allows us to analyze window height and body height. If your body and its content are 100% tall, then window height equals body height when in landscape with navigation bars hidden.


(uses bootstrap 3 tooltip)

// A helper function to toggle a help tip
// about how to hide Safari address bar when it's visible
// Monitors only landscape mode and works on Safari on iOS 8+
var attachMobileSafariAddressBarHelpTip = function (target) {
    var $target = $(target);
        title: 'Scroll up to hide Safari address bar',
        trigger: 'manual',
        placement: 'bottom'
    $(window).on('resize', function () {
        var bodyHeight = document.body.offsetHeight;
        var windowHeight = window.innerHeight;
        var isLandscape = Math.abs(window.orientation) === 90;
        var showTooltip = (windowHeight < bodyHeight);
        if(!isLandscape) return;
        $target.tooltip(showTooltip ? 'show' : 'hide');
var ua = window.navigator.userAgent;
if(ua.indexOf('iPhone') !== -1 && ua.indexOf('Safari') !== -1) {

6 Responses
Add your response

Why not just use <meta name="apple-mobile-web-app-capable" content="yes"> to completely remove the browser chrome entirely?

This way you can use your alert to tell them to "pin to homescreen" so that they can enjoy fullscreen - and they only have to see it once.

IMO this is FAR less annoying to your end-users.

over 1 year ago ·

It's one of the options for sure and you should use that if it fits your purpose. In my opinion it will only work for loyal users.

Standalone apps have other problems like all links open in Safari or entire app reload when multi-tasking. All of this can be probably fixed but requires additional work, probably even a certain design of the web app.

over 1 year ago ·

Btw turned my website into standalone app, you might be interested to see one of the major bugs on iOS 8:

over 1 year ago ·

Just in case, here's the solution to keep webapp links inside a webapp - it's super easy:

over 1 year ago ·

Thanks! I end up using this one, seems more sophisticated to me and without jQuery:

over 1 year ago ·

It doesn't works for pages that are built using the 100% height.

over 1 year ago ·