Search code examples
htmlcssfont-sizemobile-browser

HTML/CSS: table font size different in mobile device

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

Solution

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