[Support request] How to fix windows scalng issues

[John]

Hi there,

I was wondering if you had any tips for fixing scaling issues when people have their windows set to zoom 150% with website builds.
For example, we have been designing a site which looks great, but not for the client.
Their windows is set to 150% zoom in the WINDOWS < SETTINGS < SYSTEM < DISPLAY < SCALE AND LAYOUT.
This seems to be OK for most of their sites, but makes ours look really outlandishly big.

I found a few snippets of css on other sites but thought to ask here as you may have come across it for Generatepress previously.
https://silvawebdesigns.com/how-to-fix-windows-scaling-issues-above-100-for-your-website/
I did apply this, but it didn’t seem to make any difference when I applied it to the site.

Any suggestions on how best to approach this?
Cheers!
John

[David]

Hi there,

is it possible to see the site, that is displayed OK? We can then compare.

[John]

It is behind a “COMING SOON” page.
This is the link:
https://seedsofthesunbyronbay.com/
If you let me know when you are online to take a looksee I will take the COMING SOON off.
Or I can send you admin logins if you prefer.
Cheers!

[Ying]

Hi John,

It would be convenient if you can share the admin login.
Please use the private info field.

[John]

OK done – thanks!

[David]

This seems to be OK for most of their sites,

Is that URL one of the sites that looks ok at 150% ?

[John]

This is their website which we are designing for them, and it does not look good at 150%.
I only realised it when we were screen sharing.
Their Windows is a on a 14″ laptop and it suggests 150% Zoom in.
We looked at other sites, and while they are bigger on their screen, it did not look as spaced as this one.
Let me know if that makes sense.
Cheers!

[David]

We looked at other sites

– i kinda need to see one of those sites to do the comparison. Do you have one of the site URLs i can compare ?

[John]

We just looked at a few sites like Facebook and BBC.com to compare.
They did look more zoomed in, but their site looked really different and obnoxiously big.
I do appreciate it is hard to test this – just wanted to see if there was a way to apply a fix so it loads at a certain zoom depending on their settings.

[David]

So GP uses this viewport meta:

<meta name="viewport" content="width=device-width, initial-scale=1">

Which is the only thing that GP adds by default that defines how the browser should handle scaling.
Its a standard setting, for example the BBC.com site uses the exact same meta value.
Facebook uses the same but with a couple more restraints:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2,shrink-to-fit=no">

You can change the GP viewport meta using this filter if you wanted to test:

add_filter( 'generate_meta_viewport', function() {
    return '<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2,shrink-to-fit=no">';
} );

The other major contributing factor to how a site is displayed is related to the CSS units used for typography and spacing. For example the BBC site uses REM which are to a degree more responsive to scaling. Your site is using px – if that is the issue you would need to edit those settings where possible.

I did check the site on my various devices, the smallest of which is a 13″ MacBook and it looks great. And its not the kind of site i would do a comparison to Facebook or BBC as the designs are completely different.

[Author]

Posts