Mobile phone CSS - Address bar resizes screen size

Question

- SCENARIO

I am developing a responsive site, using CSS @media tags and jQuery's on(resize) function.

The main webpage's containers are set on the CSS file to have a width and height of 100vw and 100vh, respectively.

With jQuery, I adjust the sizes of the elements displayed on the website.

- PROBLEM

The responsive design implementation works fine except for browsers on mobile phones (e.g. Google Chrome running on Android, iOS Safari, Android Browser, etc.).

Mobile web browsers usually show the address bar, and when scrolling down, they hide it. When scrolling up again, they display it again.

This effect is constantly resizing my webpage, as the size of the containers adjusts to the height of the viewport, which is being made smaller when the address bar is showing, and larger when the address bar is hiding, and I don't want this to happen.

1. An ideal solution may be to ignore the address bar, so that the browser doesn't alter the viewport size, which I think is not possible with traditional js code.

2. Another option could consist of avoiding the resize method to act each time the address bar shows and hides. That is, the page should change its container's height when resizing, but not when showing and hiding the address bar.

I've already tried to do so, however, I haven't been able to develop either of these two options (in the second case, I can't figure out how to implement both conditions at the same time...)

Is there a way I can accomplish this?

- CODE

JSFIDDLE

http://jsfiddle.net/kouk/emo7amuh/

HTML

<div class="container" id="first">  </div>
<div class="container" id="second"> </div>
<div class="container" id="third">  </div>
<div class="container" id="fourth"> </div>
<div class="container" id="fifth">  </div>

CSS

div.container {
    height: 100vh;
    width: 100vw;
}

div.container:nth-child(2n+1) {
    background-color: crimson;
}

div.container:nth-child(2n) {
    background-color: turquoise;
}

JS (alternative #2 - test)

/* This function blocks size-change on resize (it only works on reload) */

$(document).ready(function ($) {

        function constantHeight() {
            $("div.content_container").height($(window).height() + 60);
        }

        constantHeight();

});

Answer 1

I'm no expert nor a real programmer, but I was facing the same problem when I found your post and the links you've putted on the comment helped me with a workaround that is doing fine for me.

I won't post the real code because is too messy yet, but, what I did was basically this:

I have a function using jquery to change the size of my site to the actual screen and I added the little condition on it using the function from http://detectmobilebrowsers.com/.

  if (mobilecheck==true) {pageHeight=pageHeight+60;}

Latter in my code I have the function checking if the website is displayed in a desktop so it'd call my changeSize() in any screen size change, OR if in a mobile it had some screen change but ONLY if the width of the screen had changed too:

  var oldWidth;
  $(window).resize(function() {
  if (mobilecheck==false || window.innerWidth!=oldWidth) {
     changeSize(window.innerWidth,window.innerHeight);      
   }
   oldWidth = window.innerWidth;
  }

So in this way, the screen changes when the address bar hides but it doesn't trigger a design alteration, only if it has a orientation change because the width will change! Hope I could help, because I'm also burning my mind to solve some mobile designs issues. Cheers.