Layout Using Vh Does Not Scale with Zoom

Is it possible to use CSS zoom value based on vw units?

New Answer:

According to MDN, CSS Zoom is:

Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

Therefore there will be issues. Zoom currently does not seem to accept calc values as options (exact reason is unclear, maybe multiple).

However, as stated on MDN:

transform: scale() should be used instead of this property, if possible. However, unlike CSS Transforms, zoom affects the layout size of the element.

So, you should be using transform: scale(); instead of zoom. But transform scale only accepts a unitless number; 1 = 100% zoom level.

What you're trying to achieve can't be done in CSS3 with the approach you're currently looking at.

Therefore you would need to auto generate numbers in LESS CSS (see link below) or to auto generate values in Javascript. Finally, and the most time consuming would be to set all the contents of your page to scale based on vw and vh - so every length measurement above 1920px is set as a viewport width or a viewport height value.

Options:

  • 1) Use CSS LESS (method 1 - numbers and percentage types)
  • 2) Use CSS LESS (method 2 - string interpolation)
  • 3) Use Transform: scale() Recommended and combine with other options here.
  • 4) Use Javascript to update values once the DOM is loaded.
  • 5) Set all values within your body to be percentage based above a certain media size, typically using the rem length value.

    • a) Set all length values in your page above a certain media size to using rem which will be dynamically adjusted.
    • b) Use calc on the html element to set the size of a single rem unit. This will scale the contents. (please read the link above for scaling font size to screen size)

      @media screen (min-width:1980px){
      :root {
      font-size: calc( #{$min_font}px + (#{$max_font} - #{$min_font}) * ( (100vw - 1920px) / ( #{$max_width} - 1920) ));
      }
      .some-other-element {
      width: 4rem;
      }
      }

Original (incorrect answer)

You should specify the length value of each value used in the calc that is not a multiple or division number. Therefore the result of the calc will be, for example 0.22vw.

I understand calc as using the length unit provided by the variables within the calc operation, so simply multiplying the result by 1 x the required length unit should convert any unitless or incorrectly-set length unit to the required value unit type.

Zoom accepts percentages so you can force the resultant vw value of calc(100vw / 1920); as a percentage by doing:

zoom: calc(100% * calc(100vw / 1920)); 

Which will give you on a screen width 2500px:

100% * ( 2500px / 1920 ) = 130.2% Zoom value.

For your example of 2880px.

zoom: calc(100% * calc(2880px / 1920)); = 100% * 1.5 = 150% = 1.5

I do not know how you calculated that the zoom should be 2 for these figures?

SVG prevent scaling when zooming page

You might use a viewport related unit like vw, vh.

<svg  viewBox="0 0 150 150" style="width:5vw">
<g>
<circle cx="70" cy="70" r="32" fill="white" stroke="black"/>
<circle cx="70" cy="70" r="8" fill="black"/>
</g>
</svg>

Keep Image Size the same even after zooming in and out

I would suggest you to work with the CSS Units: vw and vh.

vw=1 is relative to 1% of the width of the viewport, while vw=100 is 100%.
vh=1 is relative to 1% of the height of the viewport, while vh=100 is 100%.

The size will always adjust to the size of what you see. Therefore, even when you zoom in or zoom out, the viewport will stay the same and therefore, the sizes of your components won't change then.

You can test it out on these examples:

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vh



Related Topics



Leave a reply



Submit