Helping you build a better website
(and other interesting web stuff)

CSSHTMLJavaScriptjQueryMySQLPHPSilvaTechnologiesWooCommerceWordpress
Silva Web Designs - Blog

How to fix Windows Scaling issues above 100% for your Website

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.

Nathan da Silva - Profile

Posted by: Nathan da Silva

Nathan is the Founder of Silva Web Designs. He is passionate about web development, website design and basically anything digital related. His main expertise is with WordPress, Magento, Shopify as well of many other frameworks. Whether you need responsive design, SEO, speed optimisation or anything else in the world of digital then get in touch. If you would like to work with Nathan, simply drop him an email at [email protected]

It’s good to share

Join the discussion