4

I am building a responsive theme for wordpress and came across an annoying issue with font scaling on Android (tried both Chrome and Firefox on Nexus 7 KitKat and Nexus 5 Lollipop).

Short version: if you open the following on android with text scaling set to smth. other than 100% headers with text and two links will scale while header with 3 links NOT!

<h6>Tiny header</h6>
<h6>
    <a href="#">1</a>
    <a href="#">2</a>
</h6>
<h6>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
</h6>
<p>Lorem ipsum dolor sit amet, test link adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>

http://jsfiddle.net/mishamsk/38oho1u8/3/embedded/result/

Long version:

I am using relative font sizing (em's) since I want my page to respect user text scaling settings. Paragraph and heading fonts are sized relative to the body, which is set to font-size: 100%.

It works like a charm on desktop. However on Android when text scaling is applied fonts do not scale properly. Some fonts scale up while others stay really small which breaks page layout and legibility of text.

I've read about Font Boosting and how to disable it here. Unfortunately it disables text scaling completely and set base font to default value which is really bad. I find it too small to read on Android.

Is there a way to overcome this?

mishamsk
  • 55
  • 8

1 Answers1

1

What's your exact CSS markup?

I personally use the following:

html{ font-size: 62.5%; /* Font size in em is equal to px by 10%. e.g. 1.4em = 14px */ }
body { font-size: 16px; font-size: 1.6em; }
h1, h2, h3 { font-size: 24px; font-size: 2.4em; }

I have no problems with scale back on android tablets or phones.

Ishio
  • 755
  • 2
  • 9
  • 29
  • 1
    More or less similar. Basically I described the core issue and ways to avoid it in my question. It turned out to be not much of question after all. – mishamsk Jun 02 '15 at 03:32
  • Ah, I guess I was confused as you were asking if there was a way to overcome this. Thank you for the tips! – Ishio Jun 02 '15 at 13:11
  • 1
    well, I was hoping someone knows a magic trick. apparently - no;) you are welcome! – mishamsk Jun 02 '15 at 14:09