Perceived(?) zoom of websites

There’s a client who is complaining that a website built does not match the approved design.

The problem is, that it 100% does. I think it’s due to the client having 125% system zoom turned on her Windows 10 15" laptop. That’s just the recommended zoom for her resolution.

We have been testing 15" laptops around here and are getting the “normal” site display. I’m trying to figure out basically what metrics go into the perceived zoom of a webpage? I always thought it was basically a combination of screen resolution, system zoom, and basically (a related point) the default font size the user has set in their OS or browser.

The logo specifically looks bigger and on 2 colleague laptops (one is 3072x1920 and the other is 1792x1120) the logo looks “like the approved design” https://fnlst.com/45iiSR

What can I learn about how webpages display websites? Are there additional metrics I do not know about? Any and all insight is appreciated.

I know very little about this but I assume the client hasn’t confused browser zoom with system scaling which is entirely different?

There were some other points raised here about similar issues.

https://generatepress.com/forums/topic/issue-because-of-users-window-scaling-settings/#post-1577022
https://stackoverflow.com/questions/61434568/windows-10-scaling-default-above-100-causing-website-sizing-issues

Sorry if that’s no help.

Who is correct in the end is decided by what is in the contract.

Though, even if you are right it might make the relationship with the client sour.

I am not working on the frontend anymore, and our designer is on vacation so I can’t ask him, but I believe as Paul mentioned you can address this by some CSS rules. So I would try to look up this first to see if you can make the client happy.

Though keep in mind that if you override the rules, it will do the same with others that have the same resolution (for example mobile/pad devices) unless you write more specific rules.

Most definitely. I’ve explained to my team & the client the differences and how to find both.

Her comment is something along the lines of “well if my settings are like this, then so are others, and the view I see isn’twhat I see when I view the mockup (which is a static image which we can scale appropriately)”

I mean, the contract is in our favor since it technically does match, but I’m trying to just learn about the factors that go into the display of websites. E.g. I think if I could understand why the 2 resolutions in my first post would display the logo " the correct size" I could take that logic and explain to the client why their resolution / zoom is the cause. I know other 15 inch laptops appear just fine. Does the type of screen matter? Video card? What determines available resolutions? Cheaper hardware get less resolutions? Some computer specs? This is the information I’m curious about :slight_smile:

I would assume that people who have system zoom on do so because otherwise they can’t see what’s on the screen as it’s too small. Counter acting that on the website would probably mean the website isn’t usable for them. Doesn’t sound like a very smart idea IMHO.

1 Like

The point of my query is not to try to override the users preferences. It’s to understand more about how computers determines recommended zoom settings and all of my questions in my last post.

The client most likely did not set the zoom setting, from the sounds of our conversations, so I’m trying to explain why (most likely) her laptop resolution is responsible for the 125% zoom. If I update my own resolution, the zoom recommendation changes. E.g. right now at 2560x1440, it’s set to 200% recommendation. If I go to a resolution ~ half the size, then it’s at 100%.

I just want to understand the factors in play here. I understand a decent bit but the more technical knowledge I can get here, the better conversation I can have with the client.

Thank you.

If I’ve given the impression that I want to override the users preferences, I’m sorry for implying that.

2 Likes

Here’s my understanding.

Say the OS/Display setting is 100% (which I’d call “normal”, but clearly for this user is not), their monitor resolution set at 2000x1000 and equates to 100dpi (for ease of math here), and their default font size is 16px. If you have a monitor that is also 100dpi, and you built the site based on a 16px font size, it should look identical to what the user sees in the approved design (I’m assuming that design is a bitmap image).

Now, what may make it not look the same between the two machines:

  • If they set their OS scaling to 125% (making no other changes), the entire page will be 125% bigger than it is on your machine
  • If they set their browser scaling to 200% (along with the 125% OS increase), the entire page will be 250% as large as yours.
  • If they set their monitor display resolution to 1000x500 with no other scaling, then their page will be 200% as large as yours.
  • If they change their default font to 18px, with no other changes, the page should look the same as on your machine, but assuming your CSS accurately handles the font sizing, their text should be 18/16 % larger than yours.

So bottom line, the visual display is the combination of monitor resolution, OS scaling and browser scaling, and if you’re also asking about fonts, then add in (well, multiply in) the scaling of the fonts.

I don’t think that’s the issue here (unless I’m mistaken).

We are not talking about browser zoom (which should scale everything as required anyway) but dealing with the windows 10 system scaling issue. With say a 1200px width screen and scaling of 125% the effective width for display is 960px. Effectively each original pixel is mapped to 1.25 pixels giving a larger display while maintaining clarity. I believe the problem arises in that text and images are now 1.25 times larger but live in a viewport space that is 80% smaller than before.

This is not the same as browser zoom where everything is zoomed uniformly (and some clarity lost)

To be honest my brain hurts just thinking about it :slight_smile: Therefore I may be picking up on the wrong concepts but it does seem to be an issue on the web where there are many threads about it but no solutions other than the pixel-ratio method to change image size accordingly. I can’t however believe that’s a real solution as you’d have to do it for every scaling factor.

It’s a shame I am away on holiday as I would have like to have played around with my Windows machine at home and change the scaling and try and see what exactly happens to a web page. :slight_smile:

2 Likes

So I think I understand how system scaling is basically working here. Pauls post was a great way for me to follow with the math.

What I think I need to focus on is why certain laptops will have certain recommended resolutions (and as a second point to this question, why do certain resolutions come with certain recommended zoom sizes?)

To my last post, I gave an example of my largest resolution having a 200% recommendation. A resolution half of that size got a 100% recommended zoom value.

I can link the exact monitor, but WHAT caused the system to ultimately recommend these settings? This scenario is slightly different than what the client is experiencing since I’m referring to an external monitor here and not a laptop screen, but I’m just trying to give a concrete example we can work with.

For additional reasons I don’t feel comfortable sharing, lets just go with the assumption that many people close to the client have 15 inch laptops (probably similar brands / settings) also experience this issue. Their laptops all are set to the 125% zoom.

This is probably outside of regular web development and more towards how operating systems work.

The core question I have to have an answer for is why she has that 125% value (presumably as the default on her machine) - because others will have it too. I can explain the zooming aspect of what that does to everything (e.g. 25% larger). What I cannot explain is why different 15 inch laptops have different zoom recommendations (resolutions). What’s the correlation between certain resolutions and the recommended zoom? My 2550x1440 was 200% recommended and a resolution half that size was 100%. If my monitor was a few inches smaller, would those same resolutions been applicable?

It’s so hard for me to be able to communicate this over text. Words are hard to put together sometimes :slight_smile: .

My last 2 or 3 laptops have had a scaling factor of 125%. On my present one (Windows 11) if I try to change the values I get a stark warning not to do it.

1 Like

This article quite nicely details what the benefits of scaling are and how it works: https://pcmonitors.info/articles/the-4k-uhd-3840-x-2160-experience/

1 Like

If the logo width is styled with CSS ‘vw’ units, its size will not change as the zoom is changed.

Am I correct in understanding that the static image mockup forms part of the contract? If so, is it specified in the contract that the web page should appear the same on a 15" laptop?

1 Like

Ryan what is that image supposed to show? I don’t see a logo there?

Also have you actually got a screenshot of what the client is seeing?

It was just some settings of my colleagues computer.

I do have pictures of what the client sees and there’s obviously a zoom going on :slight_smile: .

@rpkamp thank you - I think this is what I was looking for.

So the higher the resolution, basically the more pixels that need to fit on your screen. That’s pixel density. So that’s why the same amount of pixels can look smalller across different resolutions.

The one thing I don’t understand is how recommended zoom sizes are attributed to different resolutions. I didn’t see that specifically in the article :slight_smile: .

1 Like

It seems that may be decided by Windows depending on the resolution/ pixel density and size of the device. There’s a SO thread that discusses this.

There’s also an old article that goes into the rationale behind it but looks very buggy from the comments and seems more about the windows UI rather than side effects in browsers.

Yes but is everything zoomed or is it just images that are out of proportion compared to the rest of the page?

I still can’t believe that there isn’t some logic to the madness otherwise there is no way to cope with any scaling values as you can’t cater for them all.

Off Topic: In the end its time clients accepted that there will be differences between browsers and devices and that icons or images may be bigger or smaller as long as they are all usable and within certain criteria :slight_smile:

3 Likes

This thread was the goldmind I was looking for. Brilliant! It explains the nuance exactly as I need. Much appreciated.

I’ve hammered this home to the Project Manager and Designer. They know it. They aren’t rookies. I mentioned that we can get the same crammed effect by reducing our window widths / heights and then all we are left with is the perceived zoom of theirs just looking larger (which goes back to the system zoom). It’s been coded to perfection. Within the scope of the contract. They just need to realize it. I just think they aren’t technical people and need some hand-holding through the logic :slight_smile: . I’m joining a call with them to help illuminate them.

1 Like

The meeting went well. I rambled a bit on the technical aspects but this thread was very helpful. Thanks to all.

2 Likes