Sunday, June 10, 2018

Responsive design with vmin and mobile address bars

By Hường Hana 8:30 PM , , Leave a Comment

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?

2 Answers

Answers 1

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. With the repeat, auto-fill and minmax use can add as many boxes as fit without adding extra css with mobile query. (@media ...)

Answers 2

You are (probably) a victim of CSS3 100vh not constant in mobile browser assuming that vh chaning 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)
If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment