Different rendering of font-size on Android and desktop browsers

css firefox font-size android-browser
A.L picture A.L · Nov 14, 2013 · Viewed 13.1k times · Source

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 on Linux

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.

Android Chrome (cropped)

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?

Example

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

Answer

nrvnm picture nrvnm · Oct 26, 2014

The topic is old but still..

I found some workarounds for this. Still fighting though:

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

Enjoy.

Related questions

Font-size issues comparing chrome and Firefox

I built a site and the problem is, chrome display font-size 1px bigger than Firefox. I tried several ways to match the font-size, specified it in px, in % set the body to 100% and then the elements to 0.875em. None of …

Read More
How can I override the minimum-font-size in Firefox?

My site displays just like in need in IE and Opera, but in Firefox I can't get (via CSS) to have font sizes smaller than Firefox' default minimum-font-size. Of course I can go to Tools>Options and remove this …

Read More
Hide scroll bar, but while still being able to scroll

I want to be able to scroll through the whole page, but without the scrollbar being shown. In Google Chrome it's: ::-webkit-scrollbar { display: none; } But Mozilla Firefox and Internet Explorer don't seem to work like that. I also tried this …

Read More