On Display Resolutions, Scale and Layout in Windows 10

Question

On my last project I was designing a website in Figma and I realized there is a problem I was not so aware of.

In Windows 10, at the Display Settings, there is an option for Display Resolution, this varies from device to device and this was the known variable when it comes to screen-size and display resolution. What I mean that it varies, some users have 1280x768, some have 1920x1080 etc. That is why we have Responsive Design.

But I discovered, that apart from that, in Windows 10 there is another device setting that affects the Live Design and the Design Preview generated by a dynamic editor such as Figma. The setting I am talking about is "Scale and Layout" (the screenshot attached):

By default, this setting is set to 150%, but I am using it at 100% so that I can see more stuff on the screen.

The problem is that the design (font-size, image size, layout) looks a lot different if you change that Scale setting from 100% to something higher. It goes up to 175%. :)

At larger scale, a font-size of 10px, that you want it to be small & subtle looks like 18px font-size or higher.

How do you work around this problem? How do you explain it to the client? Especially when the client is not a geek and has little to no experience with computers/laptops, but mostly uses a smartphone?

I stumbled across this problem during a live call yesterday. It can be very annoying…

Answer 1

I am facing the same problem myself and it gets really annoying. That said, while looking around the internet I came across this answer in StackOverflow.

I'm not sure if you can control your CSS but if you can, you can do something like this:

// refers to 125%
@media (-webkit-min-device-pixel-ratio: 1.25) { ... }

and so on.. took this from the article in the link. Two things to note, though:

1. -webkit-min-device-pixel-ratio is a non standard feature
2. I haven't tried this out myself yet, but planning to very soon.

Hope that helps.

Answer 2

I haven't done this personally, and I am not sure how the scaling you are asking about affects the viewport measurement in all browsers under all OS, and there may be bugs/unsupported browser issues...but there are CSS units vw and vh which are 1% viewport width and 1% viewport height (respectively). If 1vh (1%) of 1080 is approx 10px, then setting the root element font-size to 1vh, and then using rem units for all other type would give e.g. 1.6rem for ~16px, 2.0rem ~20px (etc.). Altering the viewport size (displaying on a larger monitor etc) would maintain the relative font sizes.

Box sizes would be specified in rems also.

Worth experimenting.

One problem (or strength?) with media queries is that they have break-points (1.25; 1.5 etc) so you wind up with the most sub-optimal layout just before the breakpoint: it looks worse and worse until it meets the criterion for a fix.