Can we apply CSS using Screen Resolution instead of Viewport?

Question

I want to add CSS style based on screen resolution instead of Viewport.

Here is the case: My screen resolution is (1980px x 1080px) and if I set Windows 10 "Scale and Layout" to 125% it changes the viewport of the screen and shows that viewport style. I want to show my media style based on screen resolution, not the viewport.

Currently, I am using these media query for large resolution:

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Can we achieve this using only CSS not JS?

Screenshots:

Window 10 Scale 100% :

Viewport at Scale 100%:

Window 10 Scale 125% :

Viewport at Scale 125%:

Answer 1

To distinguish between changed scaling we need to look at pixel density. And the resolution media feature can be used for that:

/* used just for the demo*/
* {
  margin: 0;
  padding: 0;
}


/* your normal device specific media queries 
    @media (min-width: 1200px) {
      ...
    }
    @media (min-width: 1400px) {
      ...
    } */


/***********************/

.nonscaling {
  transform-origin: 0 0;
  background-color: wheat;
  width: fit-content;
}


/* scaling media queries */


/* 1. scale and layout setting at 100% */
@media (resolution: 1dppx) {
  .scale::after {
    content: '100%';
  }
}


/* 2. scale and layout setting at 125% */
@media (resolution: 1.25dppx) {
  .scale::after {
    content: '125%';
  }
  .nonscaling {
    /* offset the scaling */
    /* factor = 100/125 percent */
    transform: scale(0.80);
  }
}


/* 3. scale and layout setting at 150% */
@media (resolution: 1.5dppx) {
  .scale::after {
    content: '150%';
  }
  .nonscaling {
    transform: scale(0.6666);
  }
}


/* 4. scale and layout setting at 175% */
@media (resolution: 1.75dppx) {
  .scale::after {
    content: '175%';
  }
  .nonscaling {
    transform: scale(0.5714);
  }
}

<div class="nonscaling">I will not scale! Period.</div>
<div class="scale">You've scaled: </div>

In windows settings change Scale and layout setting to 100%, 125%, 150%, or 175%. And see the effect here.
In above snippet we are using dppx unit you can use other units. To compensate the scaled elements we are using transform: scale(..) feature. You can use zoom but Firfox doesn't support it.

Note: you can apply transform:scale(..) to entire body tag to handle all content with one rule.
Also, you can try combinations of min-resolution, max-resolution and min-width, max-width like @media (min-width:1200px) and (resolution: 1dppx).

Answer 2

Unfortunately, there's simply no way to dismiss the current display scaling settings and work with the resolution only, as it affects the viewport directly. However, you can utilize the following media query:

@media screen and (min-resolution: 125dpi) {
   /* Your code here */
}

This affects the elements: a) when the display scaling is set to 125% and above, and b) when the zoom level in your browser is set to 125% or more.

Another good practise is to give max-width: 100%; to both the html and body tags of your website. This will prevent the various elements from reaching a size which positions them outside the visible viewport (unless of course they are positioned absolutely).