Ability to zoom out if I want the page to be "larger" on wide screens.
Hi, my webpage contains a lot of text and I wanted to make it more redeable (or less boring) on larger screens (QHD, 4K), so I have used Media Queries (with
px) to change font-sizes (in rem) at certain point. Then I have tried it with rem in Media Queries also.
The problem is, when I try to zoom out on FHD screen, the page hits these breakpoints and zooms in again on some levels of zoom. I don't want to ruin the zoom out ability on smaller screens, yet have webpage with reasonably large text by default. Could you think of any solution?
I also though if it isn't the case that people with 4K monitors, etc. actually desire the small text OR have system-level zoom in turned on (whole system or browser is zoomed in).
3 Replies
most people with 4k displays will have 200% or 300% scaling on windows
i need 125% on my 1080p 15.4" display, because windows 11 makes everything ridiculously small
or it is 17"? 🤔
but seriously, the only way to know how it will work is to test it
buying a 4k display just to test this isnt a viable option, so, try to be friends with someone that has a 4k display or go to a store that lets you use the demonstration devices unrestricted
or try to find an internet caffee shop (or how it is spelled) or something
you can sorta emulate it very crudely using the mobile tools, and setting the scale to 50%
Thx. Testing is not problem, I'm able to try it. What would be handful is data about how internet users reguraly set it up, if they have large screen. I will probably let this be without "zooming" on my side, since I dont want to ruin zooming out if desired.
Any other thougths?
yes: use a font size that scales based on the viewport size
if you search for
clamp, in this server, you will find some good recommendations