I’ve known this fact for years1, but it still makes me mad: some browsers, and notably Webkit, will change your font size if it thinks it’s too small unless you tell it to fuck off.
Theorycrafting
Because many websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages. Instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels. To map the extra-wide layout back to the original device size, they either show only part of the whole render or scale the viewport down to fit.
Since text that has been scaled down to fit a mobile screen may be very small, many mobile browsers apply a text inflation algorithm to enlarge the text to make it more readable. When an element containing text uses 100% of the screen’s width, the algorithm increases its text size, but without modifying the layout. The
text-size-adjustproperty allows web authors to disable or modify this behavior, as web pages designed with small screens in mind do not need it.
text-size-adjustThis might have been defensible in 2007, but it’s absolutely ludicrous in 2024.
To fix it, you need to set both -webkit-text-size-adjust: none and text-size-adjust: none.
iOS Safari debuted the -webkit-text-size-adjust property
and that is still the only one it respects.
Chrome and Edge and others support the experimental standard
text-size-adjust property.
Firefox doesn’t support either,
though I’m not sure whether mobile Firefox has the bad behavior in the first place.
What it looks like
Every once in a while I come across a site that doesn’t set this properly.
To be clear, I don’t mean to shame the examples I list above (well, except maybe Pinboard, which I did notify about the problem). For one thing, my site was published like this for weeks/months before I noticed and several days before I figured out how to fix it. I just think it’s easier to see by example, and I think it’s worth noting that people do trip over this pothole in practice.
The absurdity of the situation makes me more sympathetic than I would have been otherwise to Pinboard’s plan to address this by “waiting for the mobile fad to die out tbh”.
References
- Mozilla Developer Network:
text-size-adjust - Kilian Valkhof: Your CSS reset needs text-size-adjust (probably)
- Apple Documentation Archive: Adjusting the Text Size
- Can I use:
text-size-adjust
-
In this house, TIL stands for “thing(s) I’ve learned”, not “today I learned” ↩︎