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?
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