Can we apply CSS using Screen Resolution instead of Viewport? - html

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