I’m used to 1366x768 screens, and when I first started making my personal website it was based on that resolution… it wasn’t until one day I checked it on a 1920x1080 screen that I noticed how weird the design got because of vertically centered elements and so… I made some @media (min-width: 1601px) hacks to scale some stuff so the site would look more or less the same on bigger resolutions, but it was a sloppy solution…
I made another site later, and I was worried about scaling, so I started using 1920x1080 resolution at 150% zoom (I have bad eyesight and struggle to read on 1920x1080, so I’m actually at 1280x720 now, but at least it’s the same aspect ratio). For the site to scale, I started using viewport values for everything, including font sizes… but if the aspect ratio changes wildly, the site looks crappy :P
So right now I was banging my head around how to have a visually pleasing website for someone with bad eyesight like me, but still have it scale correctly on any resolution for mainstream usage (as I scale down for myself, lots of sites I visit get crumpled visual elements when they are using absolute positions, z-index, and so), and I decided to letterbox my site content and force the aspect ratio on any resolution so the site will always look the same, no matter the screen. I’m using JS to scale font-size according to the letterbox width, and all other elements will use % values… I don’t know, but so far it’s sounding like I just made the site future-proof as well (for new resolution changes). The site is scaling with window size, it sucks that you can’t zoom it with the browser (so it might be bad for people with even worse eyesight, but I do plan to put a ± button for font-size though, what’s comfortable for me to read might not be for everyone), but the normal zoom works on mobile…
This is a test page I just made (ratio at 16:8 to compensate a bit for taskbar and browser stuff): https://pirahxcx.neocities.org/aspectratiottest
What do you all think of the idea? Perhaps there was an easier solution, though?
