[Resolved] Issue because of user’s window scaling settings

[madmanweb]

I know I’m probably abusing the support system but this is a Hail Mary, so please forgive me.

One of my clients was viewing the site using his latest 14″ laptop that seems to have Windows display scaling set to 150% and a bunch of image elements in the header were overlapping in unexpected ways because they had become bigger than planned.

You can see an example of this in the image attached (in private info).

Any way around this?

After some googling, I’ve tried these two:

document.querySelector("meta[name=viewport]").setAttribute('content', 'width=device-width, initial-scale='+(1/window.devicePixelRatio));

(did nothing)

and

@media (-webkit-device-pixel-ratio: 1.50) {
  * {
    zoom: 0.67;
  }
}

(Made everything ridiculously small for some reason.)

Any way around this? I’m going bonkers. Site URL is in private info.

[David]

Hi there,

aside of redesigning the site around a small HD screens with 150% browser zoom i don’t think there is any solution to that. I had a nose around stackoverflow and aside of using some janky Javascript to take over the control of the viewport there wasn’t any solutions.

[nomind]

@David, would the solution you provided to me for https://generatepress.com/forums/topic/longish-tagline-should-wrap-rather-than-interfere-with-widgets/ work in this situation as well?

[David]

Hi @nomind unfortunately not – this is different issue altogether – but thanks for checking!

[madmanweb]

Well, after much banging of head against desk, I believe I have uncovered a solution to this. I’m posting here so others searching can also be helped.

I realised that what was happening was that when a user’s display scaling is set to something like 150%, their effective resolution is actually going down. So my friend who runs a 1920 x 1024 resolution on his laptop is effectively only seeing 1920 / 1.5 = 1280 pixels wide display. And the header image elements were getting blown up accordingly.

So I tried targeting a screen resolution specifically between 1280 and 1599 pixels. And voilà, that did it. Of course, that also meant I needed to scale down the size of the images and use those images in the design, which is a bit more HTML work, but the principle is sound.

Now, usually, we don’t write styles for resolutions > 1024 (iPad) but < 1600 because that just goes into the default desktop styling rules, but this is a special case.

Here is some example code:

@media only screen and (min-device-width: 1280px) and (max-device-width: 1599px)
{

p {
	color: red;
  }

.hide-on-150
{
display: none;
}

}

@media only screen and (min-device-width: 1600px) 

{
.show-on-150
{
     display: none;
}

}

The other two classes are helper utility classes to be used for elements that are overlapping at 150% display scaling. You can create additional ones for 125% scaling too.

Let’s take an example. If you have an image in the header that is too big at 150%, you can use code like this:

<img src="big.jpg" class="hide-on-150 hide-on-mobile hide-on-tablet">

<img src="smaller.jpg" class="show-on-150 hide-on-mobile hide-on-tablet">

This will hide the big image on mobile, tablet, and on scaled-up displays. It will use the smaller image for scaled-up HD displays set to 150%

I have it working fine on my staging site and will sync it to live soon.

[David]

Awesome – nice workaround – and beats trying to mess with viewport scales! Thanks for sharing

[Author]

Posts