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.