html - How to prevent mobile devices to scale font size

Question

On our website we have the following phenomenon: When rendering the website on a desktop browser (Firefox, IE, Chrome), all fonts, in particular those embedded in <td> tags, are rendered in the same size.

However, when rendering the website on a mobile device, the font size of the texts within the <td> tags shrinks. See below. We tried to set

html { 
    -webkit-text-size-adjust: none; 
}

but this only helps with the problem on the mobile safari and opera browser. Using the tips from this website, we added

@media (max-width: 960px) {
   td {
        font-size: 20pt;
   }
}

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?

Answer 1

What Olli and JStephen said, but I also had to add text-size-adjust: none;

html,body {
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}