1

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!

surfmuggle
  • 5,527
  • 7
  • 48
  • 77
Lander Landaluce Iturriria
  • 377
  • 1
  • 3
  • 6
  • Also, you are a `new contributor` so want to tell, some people are down-voting you, because on Stack-Overflow its a rule that you should try something first, and paste some code, then others would help you! So, next time keep that in mind. Your code might be wrong, but must show that atleast you tried something ... cheers! – Deadpool Mar 19 '20 at 07:30

1 Answers1

2

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!

Deadpool
  • 7,811
  • 9
  • 44
  • 88
  • 3
    _“But, say the issue is only because your client is stubborn”_ - they might not be “stubborn”, but simply suffer from some disability / visual impairment … – CBroe Mar 19 '20 at 07:31
  • @CBroe - Yep, that can be a reason. Agree! – Deadpool Mar 19 '20 at 07:39
  • 1
    @CBroe yep, apparently I'm also "stubborn" for wanting to *actually be able to see and read text* and hence use the zoom feature that I assumed was made for exactly this purpose. Alas, it seems that not having perfect vision is a personality flaw. – VLAZ Mar 19 '20 at 07:40
  • The problem I had was that at 125% 1920px becomes 1536px which is my 2xl breakpoint. So I simply upped the breakpoint with 1rem (PostCSS): `@custom-media --2xl-down (max-width: 95.9375rem); @custom-media --2xl-up (min-width: 96rem); /* 1536px (Tailwind default) */` to: `@custom-media --2xl-down (max-width: 96.9375rem); @custom-media --2xl-up (min-width: 97rem); /* 1552px (Tailwind default + 1rem for 125% scale) */` – t0byman Apr 12 '23 at 11:49
  • If I ever saw media queries like that in a project........ – Rick Kukiela Apr 24 '23 at 17:12