14

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

1 Answer 1

11

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

5
  • 3
    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
    Commented Mar 10, 2021 at 7: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. Commented Apr 3, 2021 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
    – Webman
    Commented Jan 28, 2022 at 18:50
  • 2
    Same issue. Windows on 150% scale and 1920x1080 makes my website to use wrong media queries
    – Marek
    Commented Apr 11, 2023 at 14:10
  • 1
    zoom doesn't work on Firefox
    – Pinguluk
    Commented Nov 22, 2023 at 14:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.