Inconsistent font sizes on smart phone

Question

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:

@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;     } } 

However, the font sizes are showing up inconsistently. I've told it to show the fonts "small," but one section keeps showing the fonts in a much smaller size (id="trademark_footer" at the bottom). Using "xx-large" doesn't even make the font as big as the "small" font in the rest of the page. I'm viewing the page in Chrome on Android.

Also, when I view this page in the following simulator, all the fonts on the entire page are tiny—far too small to read.

http://transmog.net/iphone-simulator/mobile-web-browser-emulator-for-iphone-5.php?u=http://inrix.com/traffic/Privacy

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)?

Second, why are all the fonts showing up so small in the iPhone simulator?

All I'm trying to accomplish is to show all the fonts in a legible size on all smart phones.

UPDATE:

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.

Same thing if I use "em"s.

UPDATE:

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.

Tried this and it didn't seem to make a difference:

body {     -webkit-text-size-adjust: none; } 

Answer 1

I've had a look at the source of that page and I couldn't see the

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

When I looked on my iphone it didn't seem to be scaling the page at all, suggesting that the device is interpreting the size of the page and as such none of the media queries will take effect.

Adding the viewport meta tag should trigger the media queries and the font changes you are looking for.

info on the viewport tag