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