Я создаю адаптивную тему для WordPress и столкнулся с неприятной проблемой с масштабированием шрифта на Android (пробовал Chrome и Firefox на Nexus 7 KitKat и Nexus 5 Lollipop).
Краткая версия: если вы откроете следующее на Android с масштабированием текста, установленным на что-то. заголовки, кроме 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, когда применяется масштабирование текста, шрифты не масштабируются должным образом. Некоторые шрифты увеличиваются, в то время как другие остаются очень маленькими, что нарушает макет страницы и удобочитаемость текста.
Я читал об усилении шрифтов и о том, как его отключить здесь. К сожалению, он полностью отключает масштабирование текста и устанавливает для базового шрифта значение по умолчанию, что очень плохо. Я считаю, что это слишком мало, чтобы читать на Android.
Есть ли способ преодолеть это?