Windows 10 scaling default above 100% causing website sizing issues - css

Question

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.
After a bit of research, it looks like a recommended and default scaling above 100% is not unusual on some laptops (especially newer laptops with their higher pixel density). It has been suggested to me that converting all px based CSS to rems (which is a big job) might be able to fix this. However, I've run a test using a base font size of 10px and then rems for breakpoints and for fonts and it doesn't look any better when I switch between different scales.
To my mind, if the OS is set to scale greater than 100% then everything, websites included, will display accordingly. I'm wondering if I am missing something here? I happen to be working from a very crappy old low res screen so perhaps this is a confounding factor?
fiddle using rem
html {
font: 10px;
}
.wrapper {
display: flex;
justify-content: center;
.inner {
flex: 1;
padding: 1rem 2rem;
background: hotpink;
p {
font-size: 1.6rem;
}
}
}
#media (min-width: 60rem) {
html {
font-size: 16px;
}
.wrapper {
.inner {
flex: 0 1 50rem;
background: goldenrod;
p{
font-size: 1.125rem;
}
}
}
}
and fiddle using px
font: 16px;
}
.wrapper {
display: flex;
justify-content: center;
.inner {
flex: 1;
padding: 10px 20px;
background: hotpink;
p {
font-size: 16px;
}
}
}
#media (min-width: 600px) {
.wrapper {
.inner {
flex: 0 1 800px;
background: goldenrod;
p {
font-size: 18px;
}
}
}
}
Is there a solution?
Thanks

Answer 1

Because of your client's device pixel ratio, website is probably serving an unexpected responsive version to their screen "real" width.
For example: assuming you're using breakpoints like Bootstrap's ones, if their monitor has a resolution width of 1200px (extra large device) but scaling is set to 125%, browser will zoom everything out to 80% and make website serves the version corresponding to a screen width of 960px (large device).
(See this site to test "true" and adjusted sizes to a monitor.)
Depending of how your website is builded, you could workaround this by:
(1) Adjusting viewport width with JS, in a similar way to what was proposed in this thread:
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) {
/* your code here */
}
Or even detecting your client's specific pixel ratio and then zooming everything out, like that:
#media (-webkit-device-pixel-ratio: 1.25) {
* {
zoom: 0.8;
}
}
(Please note that in these scenarios you'd need to use a non-standard, although well supported #media feature.)