Search code examples
csswidthzoomingscreencalc

How to calculate CSS zoom factor in dependence on screen width?

Why I am asking this question?

I don't want to create so many media queries for really big screens.

If the screen size is bigger than 1920px, all the existing proportions should remain the same, and the appearance should be simply bigger in dependence on screen width.

What I need is something like that:

// PSEUDO CODE!

@media screen and (min-width: 1921px) {
  .content-block {
    zoom: calc (100vw divided by X)  // <- HERE
  }
}

Example:

X            = 15 
Screen width = 4000px 
Zoom-factor  = 400 / 15 ~ 266%

X is just any magic number.

Someone might think that if 1900 is 100%, maybe 19.2 might be a better fit, but I've tried out many numbers; 15 fits very well in my current case. If the screen width is, for example, 4000px, I need a zoom of 266%. The choice of the X shall not be confusing here.

The scaling only starts from 1921px according to the set media-query, but that is also a secondary issue.

It is primarily about determining a dynamic zoom factor, which changes depending on the resolution (also on the current window width, therefore 100vw, not 100%), without creating tons of media queries.

Final Notes:

I've already started a bounty once. The given answer is wrong. I don't know why people upvote it. If you click on "run code snipped" and open the result in a new window and resize the window, you will see, it does not work when you resize the window.

In the desired solution, the zoom factor should continuously change while you resize the window.

Last but not least:

No JavaScript, please, CSS solutions only. It is enough if it works in Chrome and Edge of Today.

Solution

  • It is primarily about determining a dynamic zoom factor, which changes depending on the resolution [...] No JavaScript, please, CSS solutions only.

    This in itself would be possible, though one statement of your question limits the solutions tremendously: "I don't want to create so many media queries for really big screens.". Unfortunately, without the usage of lots of media queries this won't be solvable.

    Let me elaborate on this bold statement. You can't get the screen width and/or height with CSS only (cf. this). The only possibility you have is to use @media queries - they were invented for exactly this purpose, i.e. your CSS should be displayed in a certain way if width is equal or less than 1200px would be written like that:

    @media (max-width: 1200px) {
  /* Specific CSS for 0px <= width <= 1200 */
}

    If you accepted JavaScript, we obviously would be able to grasp the current width and height via $(window).width(), respectively $(window).height() or even the screen width and height via screen.width and screen.height (click here for an example). But as you specifically mentioned not to include JS, I'll go more in-depth into a CSS solution:

    That out of the way, we now know we can't get the screen dimensions with CSS only, hence we're not able to dynamically solve this due to inability of calculating the "magic X factor". What are we able to do then? Well, as mentioned above @media queries were specifically designed for such a use case!

    @media is available on nearly all modern browser, see here for the graph:

    Chart for versions

    With @media we could build a logic similar to this:

    @media all and (max-width: 2559px), (min-width: 1920px) {
   /* specific CSS for this screen size */
}

@media all and (max-width: 3839px), (min-width: 2560px) {
   /* specific CSS for this screen size */
}

    Obviously, you could custom fit your @media queries in a way so your "dynamic" zoom still looks flawless. In my example I took the sizes for a WQHD and UHD resolution into consideration, hence the first CSS will be execute if it's 1440p, the second one if it's 4k (here is a list of common monitor/TV resolutions).

    Obviously, using too many @media queries will be a disadvantage - performance-wise and from a maintainability point of view. I'd love to give you a better solution, but going with the strict rules you have enforced upon this question, it's hard to suggest anything aside the function originally developed to achieve such a goal. If you still want to go with CSS-only, may take a look at this GitHub repo - it helps to keep the @media queries more sorted.

    Last but not least, I thought of going into detail regarding the zoom factor, but it seems like you got that under control (judging by your specific examples - in your case, you'd need to calculate your X value for each @media query you decide to implement in the end).

    Besides the links mentioned above, I suggest the following for further reading purposes: