I try to keep digging until I understand things from first principles if it’s at all practical. I won’t claim I’m above settling for a temporary fix if there’s a deadline or so I can move on for a while, but I don’t like doing it and will try to circle back to get it right when I can. I’ll definitely comment or otherwise document the loose end.
Today’s invocation of this desire involved making the new static pages reasonably responsive. It took several cycles of reading and experimenting with things until the pieces started to come together in my mind. I’ll spare you the details and a long list of links; you’re welcome to check the CSS when it’s all done. Until then the observation is that I saw that the idea of trying to target configurations for individual devices is a mug’s game. To put this even more strongly I was thinking you’d have to be on crack to try to jump through all those hoops. I knew there had to be a simpler way but I didn’t yet know what it was.
This impression was confirmed during my continued reading but I still had to figure out why different files were acting inconsistently on different devices (I was using my phone, a couple different browsers on my PC, and the test capability in Chrome that I’d discovered previously). “Why,” I asked myself, “is a media query applying when the screen size clearly indicates that it shouldn’t?” That’s when I finally “got” what the meta/viewport element is for and that I need to include it in all the HTML files.
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
This (also pay special attention to the notes at the very bottom of this page) tells the device to treat its operational resolution as its native, physical resolution.
I get why devices try to scale things and I’ve noticed this on my iPhones over time, especially my own WordPress pages. It seems much simpler to not have to predict what different devices are going to do. Monkeying with this stuff takes enough effort without having to deal with extra steps.
There are doubtless a few inconsistencies left to stumble over but I’m thinking the rest of this process just got a lot easier.