Different rendering of font-size on Android and desktop browsers

Question 1

You might be running into this known issue in Chrome for Android. Relevant text below:

Font size is inconsistent on some sites, such as Reddit and T-Mobile.

We're working on improving the display of non-mobile sites on phones, especially ones that use a large range of styles and fonts.

Question 2

The topic is old but still..

I found some workarounds for this. Still fighting though:

If you force the paragraph to have a height, it turns normal again.
Setting <meta name="HandheldFriendly" content="true"/> also fixes all paragraphs instantly.

Enjoy.

Question 3

<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes"> in the <head> tag could disable zoom on Android devices

Question 4

Could use -webkit-text-size-adjust / text-size-adjust property

edit: check this Android Chrome ignoring -webkit-text-size-adjust:none property. Text is being scaled when zoomed out

Question 5

It works for me in Chrome on my iPhone. Have you tried another browser on your Android device to see if you get a different result?

enter image description here

Also, I would remove that huge CSS reset and start with more basic CSS. That makes things like this easier to debug. How about starting with: http://jsfiddle.net/mb8Db/1/

<style>
body {
    font-family:"Century Gothic", helvetica, arial, sans-serif;
    font-size: 1.4em;
    line-height: 1.5;
}
/* failing on Android */
 body > main > article {
    font-size:1em;
}
body > main > article p {
    font-size:0.75em;
}
</style>

<main>
     <h3>Header</h3>
    <article>
        <header>
             <h3>Title</h3>
        </header>
        <p>Paragraph</p>       
    </article>
</main>

Different rendering of font-size on Android and desktop browsers

Firefox 25.0 on Linux

Android Chrome (cropped)

Example