title: How to prevent mobile devices to scale font size
body: <p>On <a href="http://geometrysummit.org" rel="noreferrer">our website</a> we have the following phenomenon: When rendering the website on a desktop browser (Firefox, IE, Chrome), all fonts, in particular those embedded in <code>&lt;td&gt;</code> tags, are rendered in the same size.</p>
  
  <p>However, when rendering the website on a mobile device, the font size of the texts within the <code>&lt;td&gt;</code> tags shrinks. See below. We tried to set </p>
  
  <pre><code>html { 
      -webkit-text-size-adjust: none; 
  }
  </code></pre>
  
  <p>but this only helps with the problem on the mobile safari and opera browser. Using the tips from <a href="https://web.archive.org/web/20140330054852/http://responsivenews.co.uk/post/13925578846/fluid-grids-orientation-resolution-independence" rel="noreferrer">this website</a>, we added</p>
  
  <pre><code>@media (max-width: 960px) {
     td {
          font-size: 20pt;
     }
  }
  </code></pre>
  
  <p>to the css, but this now miraculously only works for one of our phones held tilted sideways, not in portrait.
  How do we prevent the font-size within the table cells to be scaled down?</p>
  
  <p><a href="https://i.stack.imgur.com/9RJ5r.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/9RJ5r.jpg" alt="example picture"></a></p>