Meta viewport vs. font size

Question

on my website there's a following code in section:

<meta name="viewport" content="width=990"/>

This makes my webpage displaying well on mobile devices (I can't use width=device width because of flowing elements that have 100% width - that screws up the page badly). However, there's a side effect. On some browsers, like IE Mobile 10, it makes SOME fonts bigger. What's funny, elements on my website are using the very same CSS everywhere and only some of them are afected by this. I have no idea why is that.

Is there anything I can do to stop the browser from enlarging the font and keep it pixel-by-pixel the same as on the desktop? Change the meta tag? Put something in CSS to stop that?

I was looking for a solution for a long time now with no effect so far. I'll greatly appreciate any help on that matter.

Thanks in advance!

Answer 1

try to add this to your body

-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;

according to the following source, this will only work on IE phone if you remove the viewport tag. https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust