URL bar hiding when scrolling on phone messes '100% height' up

Question

I have this following demo website: http://woohooo.fortleet.com/

Pieces of content as well as navigation are set to 100% height. When I'm on my phone, there's this url bar up top that hides when I scroll up. However, this effect messes the 100% height up because it adjusts to the new browser size, creating an unpleasing effect. The same goes for 'vh' and 'vw' units.

I've tried the following:

function windowDimensions() {

  if (html.hasClass('touch')) {
    height = window.screen.height;
    width = window.screen.width;
  } else {
    height = win.height();
    width = win.width();
  }

}

function screenFix() {
  if (html.hasClass('touch')) {

    touch = true;
    nav.css({'height' : height + 'px'});
    home.css({'height' : height + 'px'});
    header.css({'height' : height/2 + 'px'});
    content.css({'min-height' : height + 'px'});

  }
}

This, however, creates a problem, because at the VERY TOP there's this bar with battery, wifi, signal info that is also accounted to the screen height, making the '100%' and 'vh' elements a tad bigger.

I couldn't believe I didn't find any other question about this, as I assumed this is a pretty common problem for 100%/100% sites.

Do you guys know any fix for this?

Answer 1

Your viewport meta tag seems fine. 100vh will not take into account the menu/wifi/top bar. It will only provide the viewport height, which does not account for the menubar on phones. It's important to note that 100vh, and 100% are not going to be the same height. I took a look at your site in mobile and on desktop, each section appears to be 100vh without any additional padding (so it looks correct to me).

If you are referring to the "iPhone" URL bar that automatically toggles in and out when scrolling, then you won't have any way to hide or toggle that display. The URL bar shows up when you scroll up... so yes... it may mean that you will have 20px or so that will not be visible when the user is scrolling upwards. However, it's usually not a problem, because when you are scrolling downwards IOS hides that bar... as to not affect the view of the screen. This may not answer your question, but the URL bar is what I assumed you meant.

Answer 2

It sounds as if your viewport isn't properly set. I'm pretty sure it should not take that extra 10 - 20 pixels into account.

If you haven't already, try setting the view port meta and disabling all zooming options. Hope this helps :)

Ref: https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag