Getting the right font-size on every mobile device

Question

In my mobile app I use kind of big fonts for example:

<b style="font-size:100px; font-family:Segoe UI">text</b>

When I test it on my phone it looks great but on a smaller phone it's still the same size and it is too big.

What css settings should I use to get the same size on every phone?

Answer 1

Having text with same/similar sizes is desirable across devices and you don't get that by default. It is not because of smaller devices have less or smaller physical pixels, but is due to scaling that happen on those devices in order not to break pages that are mostly designed for larger desktop screens.

For example, iPhone 5 has 1136x640 physical pixels, but using chrome's developer tools' device toolbar you may see that some elements appear to be much larger than that (say 1300x900). That is because of the zoom out scaling that browsers apply by default. In this case, CSS pixel size would become much smaller than actual pixel size. Imagine seeing a desktop size page in a smart phone, just much smaller.

If you don't want that happen, you need to tell the browser explicitly not to mess with scaling (in your pages header):

    <meta name="viewport" content="width=device-width, initial-scale=1">

If you see text equally big across devices, you may have something like that and need to just remove it to see it smaller on smartphones.