Responsive design with vmin and mobile address bars

Question

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.

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.

My HTML code has the following viewport line in it:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

My code looks like this:

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

}

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.

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?

Answer 1

You are (probably) a victim of CSS3 100vh not constant in mobile browser assuming that vh changing is the reason for vmin changing too.

Possible solutions:

1. use Javascript and manually set the size
2. use vmax in combination with aspect-ratio media queries to estimate vmin
   (feels hacky but would most likely accomplish what you want)
3. prevent the address bar from hiding in the first place: https://stackoverflow.com/a/33953987/2422125
4. prevent the address bar from showing up in the first place: go fullscreen:
   How to make a <div> always full screen?
5. try <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1, user-scalable=no">
6. use grid instead like androbin sugested (probably the best)