HTML/CSS: table font size different in mobile device

Asked 22/11, 2014 at 5:3 Answered 15/10, 2020 at 10:11

Solved html css font-size mobile-browser

I would like to have a simple website that works both on desktop and mobile browser, and encountered a weird (rookie) problem: when I have a table whose column texts are of different length, the font sizes rendered in mobile device are dramatically different. Any idea why this is happening and what is a quick and clean fix? Thanks in advance for your help!

The HTML code:

<!DOCTYPE html>
<html>
  <head>
    <style>
     body {
       font-family: Verdana, Geneva, Arial, sans-serif;
       font-size: medium;
     }
     table, td {
       border: 1px solid black;
     }
    </style>
  </head>
  <body>
    <table>
      <tr>
        <td>Short text. Short text</td>
        <td>Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. Some long text. </td>
      </tr>
    </table>
  </body>
</html>

Renders okay on desktop browser

desktop

Weird font size on mobile browser (chrome emulator)

mobile

Oogonium answered 22/11, 2014 at 5:3 Comment(3)

What emulator are you referring to? This seems to be a bug in the emulator rather than anything else. – Detonation 22/11, 2014 at 8:25

I was using Google Chrome mobile emulator, and nope, it's not a bug --- I saw the same rendering effect on my smart phone (and that's why I set out to fix it). – Oogonium 22/11, 2014 at 16:11

You’re correct, this oddity indeed happens in Chrome on Android (and the meta tag suggested in an answer fixes this). – Detonation 22/11, 2014 at 18:49

You need to consider setting the viewport of your application. To make a mobile-friendly web application, you will need to set this in your headers. You can do so by adding a <meta> tag between your <head> tags. Here is an example:

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

For a full description of what a viewport is and how it is used, you can visit the article Configuring the Viewport from Apple Developer as it was first introduced for Safari Mobile.

Gaylord answered 22/11, 2014 at 5:23 Comment(6)

Thanks @Abel, but changing font-size does not solve my problem --- the emulator still has different font size on two columns. – Oogonium 22/11, 2014 at 5:31

@YingXiong take a look at my edited answer if it works for you – Gaylord 22/11, 2014 at 5:44

Yep, the <meta> tag corrects the rendering. If you could kindly add some more explanation on that tag, I'd really appreciate it! – Oogonium 22/11, 2014 at 16:10

The font size settings are not relevant to the question. – Detonation 22/11, 2014 at 18:43

I have just edited the answer and removed the unnecessary parts of it. Now it's just the plain solution. – Gaylord 14/8, 2015 at 12:51

This is MAGIC! 🦄 – Reece 9/2, 2021 at 11:30

Eventually you might also need

text-size-adjust: none;
-webkit-text-size-adjust: none;

to make sure that text is not renderred bigger or smaller depending on the size of table cells. Especially in Safari on iOS I found this to be relevant.

Nationalism answered 15/10, 2020 at 10:11 Comment(2)

The accepted answer didn't work for me, but this did. Thank you. – Waterhouse 29/12, 2022 at 15:13

Same here. The accepted answer didn't work for me, but this did. +1. In particular, it seems it is "-webkit-text-size-adjust: none;" the key. Pay attention to the "-", it is really "-webkit" not "webkit" ! Thank you Tom ! – Eidetic 31/3, 2024 at 13:34

-2

try this

 body {
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: 15px;
}

Dipole answered 22/11, 2014 at 7:34 Comment(1)

Thanks, @Reza, but setting the font-size does not solve my problem. – Oogonium 22/11, 2014 at 16:10

Recommended topics

Hot tags