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

Solution 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

Solution 2

This is a long shot but it may help you a bit.

I've opened http://inrix.com/traffic/Privacy with an iPhone4 (iOS 5.0.1) and indeed the font is really small.

Take a look at this page's @medias (You could also see the HTML5 Boilerplate's template you might be able to dig something up from there too regarding your issue). I'm not having any font-size issue and I've tested the previous link on Chrome (Version 26.0.1410.64 m), iOS 5.0.1 (9A405) and Android 2.3.6 with both orientations (in the phones). Maybe you could dig something up from those @medias.

I couldn't agree more with Vector's answer You should specify sizes when you want consistency, you should avoid names when you want consistency.

Finally here are some links for further info:

• How we learned to leave default font-size alone and embrace the em.
• Responsive Design with CSS3 Media Queries.

Lastly as an alternate option you could download and embed a font in your css:

@font-face { 
    font-family: 'LiberationMonoRegular';
    src: url('fonts/LiberationMono-Regular-webfont.woff') format('woff'),
         url('fonts/LiberationMono-Regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal; }

Then in your resets just use your font:

* { padding: 0; margin: 0; font-family: "LiberationMonoRegular", Verdana, Tahoma; }

Hope it helps!

Comments

[cimmanon]

Are you certain that simulator is true to the real thing?

[birdus]

One of the folks I'm doing this for has an iPhone and he sent me a screen shot showing a tiny font, similar to what the simulator is showing. Seems realistic. There's also the inconsistent font size issue that I'm seeing in Chrome on my Galaxy S2. I'm wondering if they're related.

[birdus]

That seemed to do the trick! I'm a mobile neophyte, so I had no idea about that meta tag. Thank you!

[JHannes]

Gosh, this tag which never seemed important has cost me almost a day of inspecting font-sizes and container widths. Good to know it is important!

[AntonChanning]

This meta tag does help fonts stay a respectable size, however it also seems to stop images scaling to fit the screen size.

[WitVault]

Responsive Design with CSS3 Media Queries this was quite useful form me.

[Clarus Dignus]

So simple and yet so critical. No wonder the myriad of other solutions I've researched didn't make sense. I could barely find the correct wording/terminology to match my problem, let alone an answer.