HTML/CSS: table font size different in mobile device

html css font-size mobile-browser

12,434

Solution 1

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.

Solution 2

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.

12,434

Author by

Ying Xiong

Hello, world! Welcome to my homepage! My name is Ying Xiong, or 熊英 in Chinese. I graduated from Tsinghua University with a bachelor's degree in July 2010, and from Harvard University with a PhD in November 2015. While at school, I did several internships at University of Southern California (2009), NEC Laboratories America (2011), Google Inc. (2012), and Apple Inc. (2014). After graduation, I worked at Dropbox Inc. from 2015 to 2017 and Google Inc. from 2017 to 2021. Currently, I am a Staff Software Engineer at Databricks Inc.

Updated on June 05, 2022

Comments

Ying Xiong about 2 years

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