Почему на мобильном устройстве размер шрифта отображается неправильно

Столкнулся с такой проблемой: в браузере на мобильном, при включении опции "Версия для ПК", кнопки уменьшаются, а вот текстовые блоки продолжают отображаются крупно. В чем же дело? Давайте разбираться.

В обычном режиме страница отображается правильно - размер текста на кнопках соответствует размеру текста в текстовых блоках. При этом совершенно не важно в каких единицах задан размер шрифта: em, rem и даже если задать конкретный размер в px - результат будет одинаков: кнопки - уменьшаются, а текст остается крупным.

Дело вот в чем оказалось:

Мобильные браузеры отличаются от браузеров для компьютеров способом вывода страницы на экран. Для размещения страниц они используют не ширину экрана устройства, а viewport, который значительно шире. Чтобы вернуть соответствие слишком широкой страницы истинному размеру устройства, они или показывают лишь часть того, что на самом деле визуализировано, или же уменьшают размер viewport до размеров устройства.

Так как текст, который был уменьшен для того, чтобы уместиться на мобильном экране, может стать очень маленьким, многие мобильные браузеры применяют алгоритм увеличения текста для того, чтобы масштабировать текст и сделать его более удобным для чтения. Когда элемент, содержащий текст, использует 100% ширины экрана, алгоритм увеличивает размер его текста, но без изменения макета. Свойство text-size-adjust позволяет веб-разработчикам отменить или изменить это поведение, так как веб-страницы, созданные с учётом вывода на маленькие экраны, не нуждаются в нём.

text-size-adjust (developer.mozilla.org)

Стоит учитывать также, что это свойство нестандартное, и следует использовать префиксы: -moz-text-size-adjust, -webkit-text-size-adjust, и -ms-text-size-adjust.

Кроме того, это свойство работает только на смартфонах, поскольку в браузерах для компьютера и некоторых планшетах (например, iPad) нет алгоритма увеличения текста. text-size-adjust было разработано только для отключения или отмены отключения алгоритма УТ, но никак не для запуска в браузерах, в которых его изначально нет.

Таким образом, для того чтобы отключить алгоритм увеличения текста в браузере мобильных телефонов, необходимо задать свойству text-size-adjust значение none:

body {
	-webkit-text-size-adjust: none;
	-moz-text-size-adjust: none;
	-ms-text-size-adjust: none;
}

Сравним, как отображается обычный текст без и с отключенным text-size-adjust:

Как видите, размер шрифта с отключенным text-size-adjust соответствует размеру шрифта на кнопке, чего и требовалось достичь.

Вместо отключения алгоритма УТ, можно задать параметры его работы - указать процент изменения размера шрифта:

-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;

• значение менее 100% приведет к уменьшению шрифта, например, чтобы текст помещался в контейнере
• значение более 100% приведет к увеличению шрифта

По моим наблюдениям, довольно популярная практика задавать text-size-adjust следующим образом:

html {
	-webkit-text-size-adjust: 100%;
}

Есть один нюанс: если на странице присутствуют только короткие текстовые блоки, то алгоритм УТ не запустится и размер шрифта изменяться не будет. Если же на странице есть хотя бы один блок с большим объемом текста, то алгоритм УТ запустится и обработает все блоки без text-size-adjust.