9

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

LMG
  • 163
  • 1
  • 1
  • 9

1 Answers1

7

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

Felipe Saldanha
  • 1,087
  • 8
  • 17
  • 2
    Mac OS has a much higher `devicePixelRetio`, yet does not cause any problem. so `devicePixelRetio` is not the root at all. So I do not believe your solution will work – Guichi Mar 10 '21 at 07:50
  • The issue presented by OP is more related to a very specific client request than a error by itself. I've done some quick testing with my solution and it seems to work fine. – Felipe Saldanha Apr 03 '21 at 23:21
  • I have the same issue. The `devicePixelRation` solution doesn't work. The `zoom` workaroud work fine but I can't use it because the position of Material UI Select/Dropdown is wrong. [My question on Stackoverflow](https://stackoverflow.com/questions/70893625/window-scaling-website-sizing-issues-and-html-initial-scale-value-is-ignored) – Webman Jan 28 '22 at 18:50
  • Same issue. Windows on 150% scale and 1920x1080 makes my website to use wrong media queries – Marek Apr 11 '23 at 14:10