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 1280×768, some have 1920×1080 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
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:
-webkit-min-device-pixel-ratiois a non standard feature- I haven’t tried this out myself yet, but planning to very soon.
Hope that helps.
Attribution
Source : Link , Question Author : Flavius Frantz , Answer Author : Sriram Sridharan