How to deal with Safari action bar on iPhone?

[Orimanor]

Hey there,
I’ve made a full screen home page using 100VH value.
While it’s working great on desktop, on iPhone (and maybe also iPads, I didn’t check), there is a problem with the safari browser action bar:
(ignore the mess, i’ll fix that later):

The background takes the whole viewport height, but ignores the action bar.
That means that some of the content is hidden behind it. That with the dark blue div that i have: I want it to align to the center to the page, but since the page runs under the bar, it doesn’t look good.

Is there a way to override it? To somehow define that 100VH will be only the red area:

Thanks

[vincent (Vincent Bidaux)]

You’ll note that if you save the site as an app icon (from safari, Share then Add to home screen) the site will behave differently, it’s because Safari lauches in an app mode.

You can call this app mode by adding a line in the head section:

<meta name="apple-mobile-web-app-capable" content="yes" />

But you can adress this with JS. There’s a pretty good post about it here : Doing it right: skipping the iPhone url bar

Making the iPhone hide the url bar is fairly simple, you need run the following JavaScript:

window.scrollTo(0, 1);
However there’s the question of when? You have to do this once the height is correct so that the iPhone can scroll to the first pixel of the document, otherwise it will try, then the height will load forcing the url bar back in to view.

You could wait until the images have loaded and the window.onload event fires, but this doesn’t always work, if everything is cached, the event fires too early and the scrollTo never has a chance to jump. Here’s an example using window.onload: http://jsbin.com/edifu4/4/

I personally use a timer for 1 second - which is enough time on a mobile device while you wait to render, but long enough that it doesn’t fire too early:

setTimeout(function () { window.scrollTo(0, 1); }, 1000);
However, you only want this to setup if it’s an iPhone (or just mobile) browser, so a sneaky sniff (I don’t generally encourage this, but I’m comfortable with this to prevent “normal” desktop browsers from jumping one pixel):

/mobile/i.test(navigator.userAgent) && setTimeout(function
() { window.scrollTo(0, 1); }, 1000);
The very last part of this, and this is the part that seems to be missing from some examples I’ve seen around the web is this: if the user specifically linked to a url fragment, i.e. the url has a hash on it, you don’t want to jump. So if I navigate to ffconf - Web development & JavaScript conference in Brighton, UK - I want the browser to scroll naturally to the element whose id is dayconf, and not jump to the top using scrollTo(0, 1):

/mobile/i.test(navigator.userAgent) && !location.hash &&

 setTimeout(function () {   window.scrollTo(0, 1); }, 1000);​

Try this out on an iPhone (or simulator) http://jsbin.com/edifu4/10 and you’ll see it will only scroll when you’ve landed on the page without a url fragment.

[Orimanor]

Thanks, but i don’t mind the URL bar, that one is OK.
The bottom bar, i think it’s called “Action Bar” is what bothers me, cuz when setting 100 VH to a DIV it doesn’t take into consideration this bar, therefore, the graphics goes behind it.

@vincent

You’ll note that if you save the site as an app icon (from safari, Share then Add to home screen) the site will behave differently, it’s because Safari lauches in an app mode.

I tried that, but safari behaves just the same