13

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?

kojow7
  • 10,308
  • 17
  • 80
  • 135

2 Answers2

7

Chrome as of the bad UX added the feature of counting the vh, vmin etc. values only after hiding the addressbar. This way the browser won't count them too many times, and the fps will not drop, but the jumping effect will appear.

I would use grid if I were you. You can use min-content height and the boxes will be the same high independently in each row. With the repeat, auto-fill and minmax use can add as many boxes as fit without adding extra css with mobile query. (@media ...)

EDIT:

Example for comment:

main {
  display: grid;
  grid-auto-rows: min-content;
  /* to each row same height:
  grid-auto-rows: 1fr; */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  /* to center:
  justify-items: center;
  align-items: center; */
}
<main>
  <div>Hello</div>
  <div><img src="http://via.placeholder.com/100x150/000000"></div>
  <div><img src="http://via.placeholder.com/100x150/000000"></div>
  <div>World</div>
  <div>Hello</div>
  <div>World</div>
</main>
androbin
  • 1,622
  • 14
  • 31
  • 1
    Are you able to provide an example of what you mean by "You can use min-content height and the boxes will be the same high." – kojow7 Jun 11 '18 at 06:05
7

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)
Fabian N.
  • 3,807
  • 2
  • 23
  • 46
  • 1
    That #5 just seems to be magical. I used a CSS animation with a `rotate`, and it always made the screen shrink. Using this `meta` tag makes it behave much nicer! – ineiti Feb 07 '21 at 13:44