Login/Register
Different rendering of font-size on Android and desktop browsers
Asked Answered
Solved cssfirefoxfont-sizeandroid-browser
T

5

9

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.

Tibbetts answered 14/11, 2013 at 21:28 Comment(0)
E
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.

Engineman answered 14/11, 2013 at 21:41 Comment(2)
Since I observed the same problem on various websites, I think that it's related to the browser itself and not my code. Thanks – Tibbetts
Just to add some context, Android doesn't like fonts smaller than 8px and will actively increase any value to that as a minimum. – Brazilein
D
7

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.

Dixiedixieland answered 26/10, 2014 at 12:50 Comment(1)
This is still the best solution I have found at the end of 2019. The meta tag fixes this issue in Marshmallow (Android 6). – Vaucluse
S
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

Shark answered 2/9, 2014 at 8:25 Comment(0)
U
2

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

Underfoot answered 14/11, 2013 at 21:45 Comment(0)
E
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.

Engineman answered 14/11, 2013 at 21:41 Comment(2)
Since I observed the same problem on various websites, I think that it's related to the browser itself and not my code. Thanks – Tibbetts
Just to add some context, Android doesn't like fonts smaller than 8px and will actively increase any value to that as a minimum. – Brazilein
E
1

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>
Ethelethelbert answered 14/11, 2013 at 22:3 Comment(1)
Thanks for your answer. There is no problem in your jsfiddle on my Android phone, the size is correct. The CSS stylesheet in my question only contains relevant rules. – Tibbetts

© 2022 - 2024 — McMap. All rights reserved.