title: Please help me understand mobile Safari's text resizing
body: <p>Mobile Safari resizes some of the text by default, including <code>&lt;h1&gt;</code> and <code>&lt;h2&gt;</code> elements. I searched SO to see how I could prevent that and found questions such as these:</p>
  <p><a href="https://stackoverflow.com/questions/3466434/font-size-issue-with-iphone">Font size issue with iPhone</a></p>
  <p><a href="https://stackoverflow.com/questions/912681/preventing-iphone-scaling-when-rotated">Preventing iPhone scaling when rotated</a></p>
  <p><a href="https://stackoverflow.com/questions/4616019/font-size-change-after-orientation-screen-change-to-horizontal">font size change after orientation screen change to horizontal</a></p>
  <p>Notice that the answer to all of those is the CSS property:</p>
  <pre><code>-webkit-text-size-adjust:none;
  </code></pre>
  <p>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 <em><a href="http://www.456bereastreet.com/archive/201011/beware_of_-webkit-text-size-adjustnone/" rel="noreferrer">Beware of -webkit-text-size-adjust:none</a></em>:</p>
  <blockquote>
  <p>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?</p>
  <p>According to Apple’s <a href="http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariCSSRef/Articles/StandardCSSProperties.html%23//apple_ref/doc/uid/TP30001266--webkit-text-size-adjust" rel="noreferrer">Safari CSS Reference (JavaScript required)</a>, -webkit-text-size-adjust &quot;Specifies a size adjustment for displaying text content in Safari on iOS&quot;.</p>
  <p>When given a value of “none”, the documentation specifies that &quot;The text size is not adjusted&quot;.</p>
  </blockquote>
  <p>Now, I took the property description to mean that the relative text size will not be automatically adjusted, not that the text size <em>can't</em> be adjusted by the user, but the author says that his testing shows that text indeed cannot be adjusted in WebKit-based browsers when a value of 'none' is specified.</p>
  <p>(I am currently in a position where I am unable to verify this at all, but I am going to assume he and others who make the claim are correct.)</p>
  <p>So my question is this: how can one gain control over the relative text size between headers and paragraphs in mobile Safari without sacrificing accessibility?</p>