Mobile Safari resizes some of the text by default, including <h1> and <h2> elements. I searched SO to see how I could prevent that and found questions such as these:
Preventing iPhone scaling when rotated
font size change after orientation screen change to horizontal
Notice that the answer to all of those is the CSS property:
-webkit-text-size-adjust:none;
This works great for maintaining relative text size between header and paragraph elements on mobile Safari. However, I stumbled across a blog post just now titled Beware of -webkit-text-size-adjust:none:
What that does is prevent WebKit-based browsers from resizing text. Not even full page zoom resizes the text. Now, how can preventing your users from resizing text be a good idea?
According to Apple’s Safari CSS Reference (JavaScript required), -webkit-text-size-adjust "Specifies a size adjustment for displaying text content in Safari on iOS".
When given a value of “none”, the documentation specifies that "The text size is not adjusted".
Now, I took the property description to mean that the relative text size will not be automatically adjusted, not that the text size can'