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%:

user_15273968 · Answer

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);
  }
}

I will not scale! Period.
You've scaled:

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).

user_12421440 · Answer

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).

Can we apply CSS using Screen Resolution instead of Viewport?

2 Answers