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);
    $target.tooltip({
        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) {
    attachMobileSafariAddressBarHelpTip('#main-nav');
}