Different rendering of font-size on Android and desktop browsers

Question

I'm wondering why the font-size can be so different on my desktop and on my Android (the default browser, Chrome, on an up-to-date system).

In summary, the font-size in <p> (paragraphs) is too big on Android.

I use a CSS reset stylesheet (article in french).

Firefox 25.0

You can see that the text of the Lorem ipsum paragraph is decreased (relatively to the text of the page). The Title has larger text.

Chrome on Android

The size of the text in the Lorem ipsum paragraph is close to the size of the Title. Why Chrome don't display the text with a smaller size?

See the jsfiddle: edit, fullscreen and fullscreen without jsfiddle bar.

nrvnm · Accepted Answer

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.

Julia · Answer

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

Donate For Us