CSS и особенности размера шрифта Safari

Замечено, что Safari на iPhone отображает неожиданные несоответствия в размерах шрифтов. В частности, текст с меньшим размером шрифта (например, 13 пикселей) выглядит больше, чем текст с большим размером (например, 15 пикселей). Такое загадочное поведение поднимает вопрос: существуют ли связанные с CSS или другие факторы, ответственные за переопределение размера шрифта в Safari?

Чтобы разгадать эту загадку, важно понять важнейший аспект Safari на мобильных устройствах. Для удобства пользователя Mobile Safari автоматически регулирует масштабирование текста, когда обнаруживает риск отображения слишком маленького текста. Это попытка улучшить читаемость, особенно на небольших экранах iPhone. Чтобы преодолеть эту автоматическую настройку, на помощь приходит свойство CSS: -webkit-text-size-adjust.

Вот практический пример, позволяющий устранить путаницу с размером шрифта для пользователей iPhone:

@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
}

Этот фрагмент CSS предназначен для всех мобильных устройств с максимальной шириной устройства 480 пикселей (т. е. устройств iPhone) и отключает автоматическое масштабирование текста Safari внутри элемента

В заключение, автоматическое масштабирование текста в Mobile Safari направлено на оптимизацию читаемости на небольших экранах. Однако это может привести к неожиданному поведению размера шрифта. Используя свойство -webkit-text-size-adjust, разработчики могут восстановить контроль над размером шрифта и обеспечить единообразное отображение текста на разных устройствах, включая iPhone.