Have you ever built a website just to find out that your client doesn’t seem to view the website (even at the same dimensions) as to how you are viewing it? This is all to do with Windows Scaling (not to be confused with browser zoom). By default on a lot of Windows laptops, the default is usually set to around 125%. I am using a MacBook so I know the default scaling of my device is set to 100%. But this explains why some users will not be seeing the exact same thing you are seeing even at the same dimensions.
So the client isn’t happy with how their site is rendering on their laptop because Windows scaling (not to be confused with browser zoom) is set to 125% by default. The site isn’t broken but they don’t like the overall level of zoom.
So now we know the issue is related to device pixel ratio, we now know that the website on some devices is probably serving an unexpected responsive version to their screen “real” width.
As an example, let’s say you are using breakpoints like Bootstrap’s ones, if the monitor has a resolution width of 1200px (extra-large device) but scaling is set to 125%, the browser will zoom everything out to 80% and make website serves the version corresponding to a screen width of 960px (large device).
If you have a look at Resolution Sniffer, you will be able to see the ‘true’ and adjusted sizes of a monitor/screen.
Depending on how your website is built, you could work around this by either:
1. Adjusting viewport width with JS
document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale='+(1/window.devicePixelRatio));
2. Tweaking your stylesheet to make breakpoints reflect real device width
@media (min-width: 1200px), (min-width: 960px) and (-webkit-device-pixel-ratio: 1.25) {
/* Add Styles Here */
}
3. Detecting the specific pixel ratio and then zooming everything out
@media (-webkit-device-pixel-ratio: 1.25) {
* {
zoom: 0.8;
}
}
One of the above should definitely fix the problem if you’ve encountered this particular issue. If this has helped you, leave a comment below. If you have another solution to implement such a feature, let us know as well.
I think it would be better to target :root instead of all elements. Like so
@media (-webkit-device-pixel-ratio: 1.25) {
:root {
zoom: 0.8;
}}
Nice, BUT
try it in firefox 🙁
it doesn’t work !
Man! You’re saving my life! I had a problem with website, which is looking good on 24″ FHD, and poor on 13″ FHD, because it’s zoomed in to much. In both cases Win10 scale window size depending of dpi, and of course client want’s page to look good on both displays.
Thank you very much Nathan. Out of all the documentation available online, this is a simple and straight forward solution.
Instead of * i used html, I guess, one can also use :root as advised by Telekom
I tried doing the CSS but it breaks most of the CSS I am injecting on the page, how can I stop it from doing that?
Thanks!
Doesn’t zooming out the website defeat the purpose of why a user may have their resolution zoomed in the first place? This seems like a good work around if you do not want to account for accessibility and just want to make the client happy.
It is not working in firefox
I want a simple extra code to only make any 125% scaled images (that get slightly soft) 100% and sharp – but I do NOT want the change the text scaling…
And only change the images IF they are scaled, of course!
I notice this is especially true with smaller notebook screens that tend to default to a scale such as 150% with a 1080 resolution. I find at this scale some web sites have problems because the scaled resolution is pretty low. Which causes items to not display properly, and in some cases overlap on top of other content. I find this is corrected if I reduce scaling to 125% or in a few cases 100%. Since so many notebooks have higher resolutions these days and scaling is common with these.
Windows really sucks for setting the default zoom sizes above 100%. That basically screws up every responsive website! I can’t quite comprehend how arrogant that is.
Thanks for looking into fixes 🙂
This is my version of the approach to the problem. Since devicePixelRatio can take various intermediate values, it is best to scale the zoom smoothly:
“`
document.addEventListener(‘DOMContentLoaded’, () => {
// Get the value of `devicePixelRatio`
const dpr = window.devicePixelRatio;
// If the value is 1, return early
if (dpr === 1) {
return;
}
// Define the base zoom
const baseZoom = 1;
// Calculate the zoom scaling
const zoom = baseZoom / dpr;
// Create a style element
const styleElement = document.createElement(‘style’);
// Add CSS rule to the style element
styleElement.innerHTML = `
@media (-webkit-device-pixel-ratio: ${dpr}) {
:root {
zoom: ${zoom};
}
}
`;
// Add the style element to the document
document.head.appendChild(styleElement);
});
“`