Почему iPhone увеличивает страницу, когда жмёшь на поле ввода

Симптом знакомый: на компьютере форма идеальна, открываешь на айфоне, жмёшь на поле — и страница рывком увеличивается. Шапка уезжает, кнопка «Отправить» пропадает за краем, а после ввода всё так и остаётся увеличенным.

Хорошая новость: это не баг твоей вёрстки и не глюк Safari. Это намеренное поведение, и порог у него смешной — ровно один пиксель. Поле со шрифтом 15px страницу увеличит. То же поле с 16px — нет.

Разберём три причины по частоте.

Причина 1: вычисленный размер шрифта в поле меньше 16px

Самая частая, и в девяти случаях из десяти всё заканчивается здесь.

Safari на iPhone считает, что мелкий текст в поле неудобно набирать, и заботливо подъезжает поближе. Порог — 16 пикселей. Меньше — зум, ровно 16 или больше — никакого зума.

Как проверить. Не смотри в исходный CSS — смотри на вычисленное значение. Подключи телефон к компьютеру, открой веб-инспектор, выбери поле и загляни во вкладку Computed. Там будет конечный font-size в пикселях.

Единицы значения не имеют: 0.875rem, 14px, 0.9em — всё сводится к пикселям, и важно только итоговое число. Про то, во что разворачиваются относительные единицы, есть отдельный разбор: em или rem.

Как починить. Задай 16 пикселей всем полям ввода, а не только тому, которое заметил:

input,
select,
textarea {
  font-size: 16px; /* или 1rem */
}

Да, select и textarea тоже — про них забывают, и зум возвращается на втором поле формы.

Если дизайн требует мелкого текста в поле, помни: 16px — это не «крупно». Это примерно тот размер, которым набран основной текст на большинстве сайтов. Обычно проще поднять поле до 16px, чем бороться с браузером.

Причина 2: размер прилетает не из твоего CSS

Ты прописал 16px, а зум остался. Почти наверняка значение перебивает библиотека компонентов или утилитарный класс: text-sm в Tailwind — это 14px, у многих UI-китов поля по умолчанию тоже мельче основного текста.

Как проверить. Всё та же вкладка Computed: она покажет не только итоговый размер, но и правило, которое победило.

Как починить. Правь стиль на уровне самого поля или темы библиотеки, а не глобальным !important поверх всего. Если стиль вроде задан, а не применяется — сначала исключи базовое: почему CSS не применяется.

Причина 3: ты уже «починил» это через meta viewport

Самый популярный совет в интернете — дописать в тег viewport вот это:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Не делай так. Причин три.

Оно не работает там, ради чего его добавляют. MDN прямо пишет: maximum-scale, minimum-scale и user-scalable браузер вправе игнорировать, и iOS начиная с десятой версии игнорирует их по умолчанию.

Зато работает там, где не надо. На Android запрет вполне себе срабатывает: пользователь теряет возможность увеличить страницу пальцами.

И это нарушение доступности. Запрет масштабирования отрезает людей со слабым зрением. WCAG требует возможности увеличить содержимое минимум вдвое, а на практике советуют до пяти раз.

Как починить. Убери maximum-scale и user-scalable из тега viewport и вернись к причине 1. Рабочий тег выглядит скучно — и это правильно:

<meta name="viewport" content="width=device-width, initial-scale=1">

Общий чек-лист по мобильной вёрстке — в гайде как сделать сайт удобным на телефоне.

Как закрыть вопрос разом

Чтобы не возвращаться к этому на каждой новой форме, положи в базовые стили правило, которое накрывает все поля сразу:

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  font-size: max(16px, 1rem);
}

max() тут страхует на случай, если в проекте 1rem меньше шестнадцати пикселей: возьмётся большее из двух значений. Чекбоксы и радиокнопки исключены — своего текста у них нет, размер шрифта им ни к чему.

Отдельно проверь поля с датой и временем, выпадающие списки и строку поиска в шапке. Они часто живут вне общей формы и стилизуются по-своему — поэтому именно на них зум и возвращается, когда «всё уже починено».

Почему у коллеги не воспроизводится?

Два типичных случая. Первый: он проверяет на iPad — на планшете этого поведения нет, только на iPhone. Второй: он смотрит в режиме мобильного просмотра в браузере на компьютере, а там это не эмулируется. Проверять нужно на настоящем айфоне.

А на Android такое бывает?

Нет, автоматического зума при фокусе там нет — это особенность Safari на iPhone. Но своя мобильная беда есть и у Android: всплывающая клавиатура меняет видимую часть экрана, и вёрстка, завязанная на высоту окна, подпрыгивает. Симптом похож, причина совсем другая.

Можно ли всё-таки оставить мелкий шрифт в поле?

Существует трюк: задать полю 16px и уменьшить его визуально через transform: scale(). Он работает, но ломает расчёт размеров и область нажатия, поэтому тянет за собой ручные правки. Для большинства проектов дешевле смириться с 16px.

Страница осталась увеличенной после ввода — это нормально?

Да, Safari не отматывает масштаб назад сам. Именно поэтому один зум на первом поле портит впечатление от всей формы — и поэтому чинить стоит сразу все поля, а не то, на котором заметил.