css - Android Chrome ignoring -webkit-text-size-adjust:none property. Text is being scaled when zoomed out

Question

Our client requested a website, but didn't want to pay for a mobile version. We still are making it work on mobile. When zoomed all the way out, Chrome on Android (4.0) is scaling a bunch of the text. We have tried setting the -webkit-text-size-adjust:none property, but it seems to be ignored and text is still being scaled up.

Works fine on iOS.

Any suggestions?

Answer 1

Just discovered a workaround for this. Set a max-height on a parent element of the text to be much larger than it would ever appear. For example,

<p class="intro">
  This is some text that is appearing blown up 
  and ridiculous on Chrome Mobile.
</p>

p.intro {
  max-height: 5000em;
}

You can set the max-height on any parent element. It doesn't have to be the first parent. For example,

<footer class="primary">
  <p class="intro">
    This is some text that is appearing blown up 
    and ridiculous on Chrome Mobile.
  </p>
</footer>

footer.primary {
  max-height: 5000em;
}