title: Inconsistent font sizes on smart phone
body: <p>I'm tweaking a web page so that it looks good on smart phones. I've declared a @media section in the CSS file so I can specify the font sizes for this page. Here's that media section:</p>
  <pre class="lang-css prettyprint-override"><code>@media screen and (max-device-width: 640px) {
      #TermsOfUse {
          padding: 0 2em 0 2em;
          margin-left: auto;
          margin-right: auto;
          color: #777;
          font: small sans-serif;
      }
  
      #TermsOfUse p {
          color: #777;
          font-weight: bold;
          font: small sans-serif;
          padding-top: 1em;
          padding-bottom: 1em;
      }
  
      #TermsOfUse #trademark_footer p {
          font: xx-large sans-serif;
      }
  }
  </code></pre>
  <p>However, the font sizes are showing up inconsistently. I've told it to show the fonts &quot;small,&quot; but one section keeps showing the fonts in a much smaller size (id=&quot;trademark_footer&quot; at the bottom). Using &quot;xx-large&quot; doesn't even make the font as big as the &quot;small&quot; font in the rest of the page. I'm viewing the page in Chrome on Android.</p>
  <p>Also, when I view this page in the following simulator, all the fonts on the entire page are tiny—far too small to read.</p>
  <p><a href="http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://inrix.com/traffic/Privacy" rel="nofollow noreferrer">http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://inrix.com/traffic/Privacy</a></p>
  <p>First, why is the font in the trademark at the bottom of the page showing up so much smaller than the fonts on the rest of the page (Chrome on Android)?</p>
  <p>Second, why are all the fonts showing up so small in the iPhone simulator?</p>
  <p>All I'm trying to accomplish is to show all the fonts in a legible size on all smart phones.</p>
  <p><strong>UPDATE:</strong></p>
  <p>When I specify the font sizes explicitly, I have the same problem. If I specify 13px, for example, for the primary font, I have to specify something around 30px on the trademark for it to appear at a similar size.</p>
  <p>Same thing if I use &quot;em&quot;s.</p>
  <p><strong>UPDATE:</strong></p>
  <p>I just tested it in the default (I think) browser on my Samsung Galaxy S2 and that shows the tiny font, too—so small it's illegible. By the way, in the default Android browser, I can double tap, and it expands to a nice size.</p>
  <p>Tried this and it didn't seem to make a difference:</p>
  <pre><code>body {
      -webkit-text-size-adjust: none;
  }
  </code></pre>