title: HTML/CSS: table font size different in mobile device
body: <p>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!</p>
  
  <p>The HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
       body {
         font-family: Verdana, Geneva, Arial, sans-serif;
         font-size: medium;
       }
       table, td {
         border: 1px solid black;
       }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td&gt;Short text. Short text&lt;/td&gt;
          &lt;td&gt;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. &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Renders okay on desktop browser</p>
  
  <p><img src="https://www.dropbox.com/s/csh2j3o036wv553/html-css-table-font-size-desktop.png?dl=1" alt="desktop"></p>
  
  <p>Weird font size on mobile browser (chrome emulator)</p>
  
  <p><img src="https://www.dropbox.com/s/u1237hbjmsjluc3/html-css-table-font-size-mobile2.png?dl=1" alt="mobile"></p>