yaro4w
Last Updated: February 25, 2016
·
39.4K
· pronebird
704044

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.

Picture

(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');
}
Say Thanks
Respond

6 Responses
Add your response

17377
Classy big

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

https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

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 ·
17378
704044

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 ·
17388
704044

Btw turned my website into standalone app, you might be interested to see one of the major bugs on iOS 8: http://www.openradar.me/radar?id=5895945212395520

over 1 year ago ·
17389
Classy big

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

http://stackoverflow.com/questions/2898740/iphone-safari-web-app-opens-links-in-new-window

over 1 year ago ·
17447
704044

Thanks! I end up using this one, seems more sophisticated to me and without jQuery: https://gist.github.com/irae/1042167

over 1 year ago ·
21840
0 m8msvurywqqdbwwx26o5v4mkwhiebo4x2tslv4dunlcmemf0gqynrzgcbm nqdjp7 uksxbnkjti

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

over 1 year ago ·