Magical shrinking text on mobile devices
March 29, 2022
How do you fix a weird display problem that only happens on mobile and responsive displays?
Unusually, I found myself crafting a whole HTML document by hand the other day.
I say unusually, because I typically just build within the templated system provided by Laravel or Vue or whatever.
So, I'd put my document together with a bit of styling, and it looked great in the browser. But some text was ridiculously small and hard to read on my phone. I then discovered the same occured when I switch my browser to responsive mode and resized the window.
Almost all the text was fine - except for a code snippet in a <pre>, and a paragraph that contained an <output>.
For reasons, I also happened to have copied this design and was using the same content in a Vue project I was working on in parallel, and noticed one difference in the <head>.
<meta name="viewport" content="width=device-width, initial-scale=1.0">This gives the mobile/responsive browser a default zoom scale and, for some reason, if you don't have it, then you're going to have interesting things happen like I did.