Geek Answers Handbook

How to keep fonts consistent and consider scaling text on Android (fancy font extension error)

I am creating a responsive theme for wordpress and have run into an annoying font scaling issue on Android (I tried both Chrome and Firefox on the Nexus 7 KitKat and Nexus 5 Lollipop).

Short version: if you open the following on Android with text scaling set to smth. except 100% of headings with text and two links will be scaled while a heading with 3 links is 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:

(em), , . , : 100%.

. Android, , . , , .

Font Boosting , . , , . , Android.

?

+4
1

CSS-?

:

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

Android.

+1

More articles:


All Articles