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.
No comments:
Post a Comment