Responsive design with vmin and mobile address bars : <p>I am trying to create a number of square divs next too each other (which can expand in height if there is too much text..but most of the time there will not be too much text). I am trying to set it up in a responsive fashion. </p>

<p>When scrolling on the page, the address bar in my mobile browser keeps appearing and disappearing. When this happens when the phone is in landscape mode the dimensions change every time the address bar comes on or goes off. This creates a very annoying user experience.</p>

<p>My HTML code has the following viewport line in it:</p>

<pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
</code></pre>

<p>My code looks like this:</p>

<pre><code>.block {
        width: 80vmin;
        min-height: 80vmin;
        margin: 5% auto;
        border-radius: 15vmin;
        padding: 20px 10px;

}
</code></pre>

<p>Obviously, the culprit is the vmin component. If I do not specify vmin then the boxes are way too large when viewed in landscape mode.</p>

<p>Is there a way to get vmin to ignore the address bar and pretend it is not there? If not, what other options do I have to solve this problem? </p>
