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?

Screen size will likely include toolbar and may include status bar. Use the viewport size instead. http://ryanve.com/lab/dimensions/ Since you're already using jQuery, `$(document).height()` and `$(document).width()` should get you started. — Palpatim, Jul 21 '15 at 20:38
how do u give 50 points away when u only have 35, just curios ? — fuzzybear, Jul 21 '15 at 20:38

score 7 · Accepted Answer · answered Jul 21 '15 at 20:52

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.

the problem is, 'vh' units actually DO count the URL bar on Android's Chrome. i reported the issue, they seem to be working on it as we speak. it is currently planned for v46 fix — Idefixx, Jul 24 '15 at 17:13
Since no answer has been chosen. I have awarded the bounty to this answer since I didn't want it to be wasted and this answer had the most upvotes. — fred1234, Jul 27 '15 at 13:26

score 4 · Answer 2 · answered Jul 21 '15 at 20:35

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

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

2 Answers2