Форма Telegram Mini App может хорошо выглядеть при открытии и стать неудобной после появления экранной клавиатуры. Поле уходит под нижнюю панель, кнопка подтверждения исчезает, а фиксированный блок перекрывает последнюю строку. Проверка одного скриншота не обнаруживает эту проблему: интерфейс нужно испытать во время ввода.
Для исправления разделяют доступную область приложения, прокрутку формы и поведение элементов управления. Telegram предоставляет сведения о видимой высоте и событиях её изменения, но не строит за разработчика подходящую вёрстку. Ниже разобран порядок диагностики мобильного сценария с длинной формой и несколькими текстовыми полями.
Сначала воспроизведите проблему точно
Запишите платформу, версию клиента, ориентацию и способ запуска Mini App. Затем укажите поле и действие, после которого кнопка перестаёт быть доступной. Разные мобильные окружения могут по-разному менять область содержимого, поэтому описание «на телефоне всё съезжает» недостаточно для проверки исправления.
Различайте перекрытие клавиатурой, неверную высоту контейнера и отсутствие прокрутки. Иногда нижняя часть существует, но пользователь не может до неё добраться из-за стилей. Иногда приложение считает полной высотой экран устройства, хотя реально доступна меньшая область. У этих причин разные исправления.
Используйте тестовые значения достаточной длины. Короткое слово в первом поле не показывает, что происходит с многострочным описанием и последним элементом формы. Проверка должна включать именно путь, которым человек вводит сведения и подтверждает результат, а не только начальный экран.
Какие данные предоставляет Telegram
В документации различаются текущая высота видимой области и её последнее устойчивое состояние. Эти значения имеют разное назначение. Telegram отдельно предупреждает о частоте обновления текущей высоты и применении её для закрепления нижних элементов. Перед реализацией прочитайте смысл полей, а не выбирайте по похожему названию.
Событие изменения viewport помогает реагировать на переходы. Но обработчик не должен бесконечно перестраивать весь интерфейс на каждом промежуточном значении. Определите, где нужна реакция на устойчивое состояние, а где достаточно обычной адаптивной вёрстки и доступной прокрутки.
Проверяйте поддержку используемых методов. Например, управление скрытием клавиатуры доступно не во всех версиях API. Наличие метода в новой документации не означает его наличие у каждого пользователя. Приложение должно иметь понятный путь и без необязательной возможности, а не ломать всю форму при отсутствии функции.
Прокрутка и расположение полей
У формы должен быть один понятный основной путь прокрутки, если нет обоснованной необходимости в другом. Несколько вложенных областей часто затрудняют перемещение между полями и создают ощущение застрявшего экрана. Проверьте, как пользователь добирается до последнего поля при открытой клавиатуре.
Не скрывайте важную ошибку выше текущей области без указания. Если подтверждение не прошло, человеку нужно понять, какое поле исправить. Перемещение к проблемному месту должно сохранять фокус и введённые данные. Внезапный возврат в начало длинной формы мешает больше, чем сама ошибка ввода.
Для многострочного поля предусмотрите разумное поведение роста и прокрутки. Огромное поле может вытеснить все действия, а слишком маленькое заставит редактировать длинное описание в неудобной области. Подход выбирают по задаче и проверяют с реальным объёмом текста, а не по одной строке демонстрации.
Условный пример: заявка с описанием ошибки
Предположим, Mini App собирает систему, версию и описание неполадки. На последнем шаге пользователь вводит несколько абзацев. Клавиатура открыта, собственная закреплённая кнопка приложения занимает нижнюю часть, а контейнер имеет неверно рассчитанную высоту. Человек не может увидеть окончание текста и отправить заявку.
Разработчик сначала определяет, какой блок перекрывает содержимое, затем исправляет модель высоты и отступов. Проверяет фокус, прокрутку и финальное действие при открытой и закрытой клавиатуре. Введённый текст сохраняется при смене ориентации и возвращении к предыдущему полю согласно правилам приложения.
Это условный пример. Он не означает, что один универсальный CSS-параметр исправит любую Mini App. Нативная кнопка Telegram и собственная нижняя панель имеют разное поведение. Приёмка должна охватывать именно используемую комбинацию, а не похожий экран другого проекта.
Собственная панель и нативная кнопка
Выберите, где находится основное действие: внутри веб-страницы или в поддерживаемой нижней кнопке Telegram. Если используются оба варианта, их назначение должно быть различимым. Два одинаковых подтверждения могут запутать пользователя и создать повтор операции при задержке ответа.
Состояние выполнения показывают последовательно. Пока запрос обрабатывается, интерфейс объясняет ожидание и предотвращает случайный повтор там, где это нужно. Но блокировка кнопки не заменяет серверную проверку: после плохой связи или повторного открытия запрос может прийти ещё раз.
Не считайте скрытие клавиатуры обязательным условием отправки. Иногда это удобное действие, но пользователь должен иметь понятный путь без знания специального жеста. Если кнопка доступна только после случайного закрытия клавиатуры, проблема интерфейса остаётся даже при технической возможности завершить форму.
Возврат к приложению
Пользователь может свернуть Mini App, открыть другой чат и вернуться. Проверьте, восстановились ли размеры и положение фокуса. Если приложение использует сохранённые значения viewport с первого запуска, они могут перестать соответствовать текущему состоянию оболочки.
При возвращении не отправляйте форму автоматически и не очищайте текст только из-за изменения области. Данные и геометрия интерфейса — разные части состояния. Перестройка экрана должна сохранять смысл незавершённого действия, если приложение обещает продолжение.
Также проверьте появление нативных окон и выбор файла. После их закрытия форма должна оставаться доступной. Ошибка часто проявляется не при обычном наборе, а после нескольких переходов между клавиатурой, вложением и возвратом в длинное описание.
Проверочный набор устройств
Пройдите сценарий на поддерживаемых мобильных платформах, с маленьким экраном и увеличенным текстом. Добавьте смену ориентации, несколько полей и длинное сообщение об ошибке. Не обязательно проверять все устройства мира, но набор должен отражать заявленные условия продукта.
Для каждого случая проверьте наблюдаемые результаты: видно активное поле, можно прочитать подсказку, добраться до действия, исправить ошибку и сохранить данные. Скриншоты полезны как доказательство конкретного состояния, но видео либо пошаговая запись помогают показать поведение при открытии клавиатуры.
После исправления повторите сценарий с недоступным сервером. Ошибка отправки не должна снова закрыть кнопку, потерять текст или оставить вечное ожидание. Мобильная форма готова, когда человек может завершить задачу и восстановиться после ожидаемого сбоя, не угадывая скрытые жесты и особенности вёрстки.
Повторные обработчики и скачки высоты
Если после нескольких открытий формы экран начинает дёргаться, проверьте количество активных подписок на изменение размеров. Старый обработчик может применять прежние значения одновременно с новым. В результате приложение само создаёт колебания, которые ошибочно принимают за непредсказуемость мобильной клавиатуры.
На тесте несколько раз откройте и закройте один маршрут, затем начните ввод в последнем поле. Сравните поведение с чистым запуском. Если различие появилось только после повторных переходов, ищите накопленное состояние и очистку подписок. Не добавляйте произвольные задержки, пока не определена причина: они могут скрыть проблему на одном устройстве и ухудшить её на другом.
Для исправления полезно записать последовательность размеров и переходов без клиентского текста формы. Таких технических сведений обычно достаточно, чтобы понять, кто меняет контейнер. Полный пользовательский ввод не нужен для диагностики геометрии. После исправления повторите обычный ввод и возврат из выбора файла, чтобы убедиться, что устранён именно конфликт обработки, а не случайно отключена необходимая реакция интерфейса.
Источники
Высота и события описаны в Telegram Mini Apps, управление нижними кнопками — в BottomButton. Поддержку методов и фактическое поведение проверяйте в используемых версиях клиентов.