Tuesday 18 June 2013

Removing the iPhone navigation bar in 100% height layouts

Just a quicky - I've just finished a site that uses

#container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
}

to lock the site to an app-like, 100% x 100% layout (thanks Steven Sanderson). But when it came to the usual trick of

if(navigator.userAgent.toLowerCase().indexOf("iphone") !==-1) {
    window.scrollTo(0,1);
}

to remove the Safari navigation bar nothing happens! This is because, as the layout is only 100% tall, there's nowhere to scroll to. So a quick fix is to do this:

if(navigator.userAgent.toLowerCase().indexOf("iphone") !==-1) {
    $('body').height(screen.availHeight-44);
    window.scrollTo(0,1);
}

This (jQuery assumed) pushes the body out to fill the available height (minus 44px for the navigation bar). Then the scrollTo works perfectly.

Voila, app like layout.