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 therem
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 thehtml
element to set the size of a singlerem
unit. This willscale
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;
}
}
- a) Set all length values in your page above a certain media size to using
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
What's the Best Way to Test Cross-Browser Compatibility
How to Create a Sidebar and Content Area Using Flexbox
Css: How to Select Data Value Greater Than
Css3 Transition from Width Auto to "N" Px
How to Put Text Inside Radio Button
Ie Flexible Box Model Not Working
Two Column Layout with One Having a Fixed Width in CSS
Forcing a Column to Be Empty in a Responsive Grid Layout
Adding an Arrow on Both Sides of a Div Using CSS
How to Create a Squeezed Box Using Only CSS
How to Custom Table Responsive Materialize
How to Center One of the Flex/Grid Children(More Than Three) and with Different Widths
How to Add Tableview Footer in Javafx Tableview
Two Images Background Inline Separate by Diagonal Border
How to Set a Rotation Point for an Element in CSS