css - 如何在 Android 上保持字体一致并尊重文本缩放(Font Boosting 的奇怪错误)

Question

我正在为 wordpress 构建一个响应式主题，在 Android 上遇到了一个恼人的字体缩放问题(在 Nexus 7 KitKat 和 Nexus 5 Lollipop 上尝试了 Chrome 和 Firefox)。

简短版本:如果您在 android 上打开以下文本缩放设置为 smth。除了带有文本和两个链接的 100% 标题之外，将缩放，而带有 3 个链接的标题则不会!

<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/

长版:

我正在使用相对字体大小 (em)，因为我希望我的页面尊重用户文本缩放设置。段落和标题字体的大小相对于正文设置为 font-size: 100%。

它在桌面上就像一个魅力。但是在 Android 上，当应用文本缩放时，字体不会正确缩放。一些字体会放大，而另一些会保持很小，这会破坏页面布局和文本的易读性。

我已经阅读了有关字体增强以及如何禁用它的信息 here .不幸的是，它完全禁用文本缩放并将基本字体设置为默认值，这非常糟糕。我觉得它太小了，无法在 Android 上阅读。

有没有办法克服这个问题？

Answer 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 平板电脑或手机上缩减没有任何问题。