Отменить увеличение текста на мобильном

Отменить увеличение текста на мобильном

В последнее время очень быстро развивается мобильный интернет и, как следствие, большинство сайтов "хотят" выглядеть на устройствах с небольшими экранами, как минимум, прилично. Есть несколько способов добиться этого: можно сделать отдельную мобильную версию, сделать сайт адаптивным или просто заставить его отображаться так, как на экране компьютера с возможностью приближения... Каждый из этих способов имеет ряд своих плюсов и минусов, но я не об этом...

Бывают такие ситуации, когда мобильный браузер (в частности Chrome на Android) самопроизвольно увеличивает размер текста какого-то блока. Причем это может быть даже не весь текст на сайте и даже один из двух совершенно одинаковых блоков. Его логика лично мне до сих пор непонятна... Если вы сталкивались с таким эффектом, то эта статья для вас. Как избавиться от этого эффекта читайте ниже...

Воспользоваться прогрессивным CSS свойством

Существует специальное свойство text-size-adjust, которое управляет отображением текста на мобилке и принимает одно из 3 значений:

auto - текст подстраивается автоматически (по-умолчанию);
none - размер текста не меняется - вот это значение как раз нужно задать, чтобы текст не увеличивался;
70% - желаемый относительный размер текста (может быть другое значение).

До недавнего времени оно работало только с префиксом -webkit- (-webkit-text-size-adjust:none;), но технологии не стоят на месте, это свойство уже поддерживается Firefox 11 и в Windows Phone 7 оно работает с префиксом -ms- (-ms-text-size-adjust:none;).

Рекомендую применять его к конкретному элементу, который выглядит не так, как нам хочется. Однако, если оно вам не помогло, то есть 2 прорывной способ, о котором я узнал достаточно недавно...

Парабабааам - задать элементарное CSS свойство

Допустим, что мобильный браузер увеличивает размер текста только в 1 абзаце. Теперь внимание, мы берем и назначаем этому абзацу свойство max-height:99999px; и все! Текст начинает отображаться нормально! Не правда ли это чудесно? Мы всего лишь говорим, что максимальная высота нашего блока может быть очень большой и наша проблема решается сама собой...

26.03.17
Для просмотра сайта обновите браузер.