Search code examples
cssfirefoxfont-sizeandroid-browser

Different rendering of font-size on Android and desktop browsers

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.

Solution

  • 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.