Search code examples
javascripthtmlcsswindows-10scale

125% Windows 10 scale in web

Some clients using Windows 10 have set the screen scale to 125% or 150% (see screen resolution in Windows).

When they visit my website they can not see some content unless they change the scaling settings to 100%.

  • Is there any chance of fixing it from code?
  • How to address desktop scaling (not browser zoom) in css?

Thank you!

Solution

  • What you are asking brother can by achieved via CSS Media-Queries. But, for that you will be required to know the screen-resolution of your client. After that for that particular screen you might write media query and fix your UI.

    Example: 

    @media only screen and (min-width: 1440px) { 

  //Write your CSS fixes here

}

    But, say the issue is only because your client is stubborn and he wants to set the default zoom size to 125% or 150% only and then visit your website. In that case you will have to add javascript on landing your page:

    document.body.style.zoom = 1.0

    By jQuery your might write it as:

    $(document).ready(function(){
  document.body.style.zoom = 1.0
});

    Or, you might use:

    var scale = 'scale(1)';

    document.body.style.webkitTransform =  scale;    // Chrome, Opera, Safari
document.body.style.msTransform =   scale;       // IE 9
document.body.style.transform = scale;     // General

    For further research, check this out:

    Force page zoom at 100% with JS

    Hope, this helps!