What Do: Mobile Browsers Render Some Text Larger
Created: | Updated:
Given the following situation on mobile where certain text are rendered larger than the font size you've set:
What do if you want consistent font size rendering on all platforms?
Disable any text inflation algorithms being applied by browsers:
html {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}Note: Some ancient WebKit-based browsers, specifically Chrome 27 and Safari 6 or older, had a bug where they prevented zooming in and out if -webkit-text-size-adjust is set to none. Realistically, practically nobody uses these browsers anymore, but if you want to cover all of your bases, setting -webkit-text-size-adjust to 100% instead of none has the same effect.
Additional Information
Since web browsing was initially a desktop only thing mobile browsers implemented ways to make websites designed for desktops to work on mobile. This included enlarging certain text using text inflation algorithms.
In my specific case, this text enlargement was going awry on this website's code blocks when they reached a certain horizontal length. Interestingly, it only happened on iOS Safari and not on Android Chrome. This leads me to believe that this might be a bug in Safari. Particularly, because this website sets the content of <meta name="viewport"> to width=device-width, initial-scale=1.0, which should tell browsers that they don't need to do any weird text scaling since this website is already built with different device sizes in mind. I couldn't pinpoint exactly what conditions are needed to manifest this, but during my testing, it seems it has to do with the following structure where a parent set to display inline-block has a child set to position relative that's displaying monospace text of a certain size and length:
<pre style="display: inline-block">
<code style="position: relative">Some long text here...</code>
</pre>I'm not sure how accurate this is, but for now, that's as far as I got and am willing to go to investigate it.