Are viewport units vw/vh/vmin/vmax not zoom friendly?

Question

As per How to properly use css-values viewport-relative-lengths?, I've tried using viewport units in the following way, to automatically magnify a tiny page on a big monitor:

/* automatically magnify business-card-style page in large viewports */
@media (min-width: 50em) and (min-height: 64em) {
  /* start with 100% at 50em, we'll have 150% magnification at 75em */
  html {font-size: 2vmin;}
}

However, when tested in Google Chrome, it made the zoom feature to mostly stop working.

Is it a bug/feature in Chrome for the zoom to immediately stop working with the above code in place, or is it by design and by the spec?

Answer 1

AS per definition vw/vh/vmin/vmax are units related to the viewport width:

• vw Relative to 1% of the width of the viewport
• vh Relative to 1% of the height of the viewport
• vmin Relative to 1% of viewport's* smaller dimension
• vmax Relative to 1% of viewport's* larger dimension

div{
  height: 3rem;
  border: 1px solid red;
  margin: 1rem;
}

 The following div has style="width:10vh"
 <div style="width:10vh"></div>
 The following div has style="width:10vw"
 <div style="width:10vw"></div>
 
 

If you see in the example, as you resize the window the divs are changing its width. If you apply zoom but the view port doesn't change size it will not apply any change.

Maybe you have to check any additional property set in the viewport meta tag in your html header and check if its blocking the way it should scale on zoom. This article could help you to check it https://css-tricks.com/snippets/html/responsive-meta-tag/