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;
}

Answer 2

I know this is an old post, but I came across it and found the answer that worked for me is just an extension to Olli's. There are more css styles you have to add to support other browsers:

-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;

I had originally put everything in table cells which worked on my nexus, but my samsung phone was still randomly deciding which text to scale and which to keep the set size. I set 13px to everything on the page and it was the only font size styling I did. This was the only way I was able to fix it on all the devices I have.