Посетитель заполняет форму на телефоне, но клавиатура закрывает кнопку отправки и до неё нельзя прокрутить. Сначала нужно выяснить, что мешает: уменьшение видимой области, закреплённая панель или запрет прокрутки внутри формы. Это можно проверить до переделки дизайна; повышение слоя кнопки и замена одной единицы высоты не гарантируют результата.
Три первых действия без изменения сайта
- Откройте ту же форму на реальном телефоне. Запишите модель, версии системы и браузера, ориентацию экрана и поле, после нажатия на которое исчезает кнопка.
- При открытой клавиатуре попробуйте прокрутить саму форму, затем область вне неё. Закройте клавиатуру и сравните результат: возвращается ли кнопка, сохраняются ли введённые данные.
- Повторите сценарий в обычной вкладке браузера, если сбой замечен внутри приложения. Снимите короткое видео на пустой форме или с согласованными тестовыми данными, без личных сведений.
Этих наблюдений достаточно для первого описания ошибки. Отправлять заявку, оформлять заказ или запускать оплату ради проверки расположения кнопки не нужно. Эмуляция узкого экрана на компьютере полезна для верстки, но не заменяет проверку экранной клавиатуры на устройстве.
Если страница вообще не загружается, это другой сценарий: поможет разбор недоступности сайта на iPhone и Mac. Здесь рассматриваем уже открытую форму, которой мешает интерфейс.
Почему кнопка есть в верстке, но её не видно
У мобильной страницы есть область, относительно которой строится раскладка, — layout viewport. Видимая пользователю часть называется visual viewport. По документации MDN, экранная клавиатура может уменьшить вторую область, не меняя первую; увеличение страницы пальцами тоже меняет видимую область.
Поэтому «кнопка стоит внизу экрана» — недостаточное описание. Разработчику нужно понять, относительно какой области закреплён элемент и как устроена прокрутка его контейнера. В документации Chrome отдельно описано, что элементы с position: fixed могут оказаться за клавиатурой, когда размер области раскладки сохраняется.
Не считайте любую разницу высот размером клавиатуры: на измерение влияют масштаб и панели браузера. Сначала сравнивайте одинаковое положение страницы и масштаб, затем отдельно проверяйте увеличение текста и поворот.
Четыре гипотезы и проверка каждой
Закреплённая панель осталась ниже видимой границы
Признак: поля двигаются, а нижняя панель с кнопкой остаётся на прежнем месте. На тестовой копии разработчик временно возвращает её в обычный поток страницы и проверяет достижимость кнопки прокруткой.
Если проблема исчезла, это аргумент проверить способ позиционирования панели. Рабочее решение может состоять в отказе от закрепления на маленьком экране. Когда закрепление необходимо, нужна отдельная логика размеров и положения, проверенная при открытии и закрытии клавиатуры.
Высота окна формы не оставляет места для прокрутки
Признак: длинная форма обрезана, а её нижняя часть недоступна даже после попытки прокрутить содержимое. Проверьте фиксированную высоту оболочки и вложенных блоков, а также наличие собственного прокручиваемого участка.
Замена 100vh на 100dvh может помочь с динамическими панелями браузера, но не является универсальным исправлением клавиатуры. В материале web.dev о единицах высоты указано: клавиатура по умолчанию не учитывается ими как панель браузера. В поддерживающем браузере параметр interactive-widget=resizes-content меняет поведение, однако переносить его на весь сайт без проверки остальных экранов нельзя.
Заблокирована не только страница за окном, но и сама форма
Признак: проблема появляется только во всплывающем окне; обычная форма на странице прокручивается. Проверьте, какой элемент должен прокручиваться и не запрещено ли это его стилями или обработчиками касаний.
Например, overflow: hidden обрезает содержимое и не даёт пользователю прокручивать его обычным жестом, хотя программная прокрутка возможна. Это свойство не доказывает ошибку само по себе: блокировка фона за окном может быть намеренной. Проверка должна показать, что внутри окна остаётся отдельный доступный путь к полям и кнопке.
Скрипт фокуса возвращает форму в неверное положение
Признак: после появления клавиатуры форма сначала выглядит правильно, затем прыгает; либо проблема возникает при переходе к следующему полю. Это гипотеза о конфликте автоматической прокрутки браузера и кода страницы.
На тестовой копии разработчик по одному проверяет обработчики фокуса и изменения размеров. Сравнивает момент события, положение активного поля и панели. Исправление должно сохранить фокус и ввод: нельзя просто снимать фокус, запрещать масштабирование или скрывать сообщения об ошибке.
Какие замеры помогут выбрать точечную правку
Снимайте размеры до фокуса, после завершения появления клавиатуры и после её закрытия. Для каждого состояния нужны высота области раскладки, visualViewport.height, положение видимой области и границы кнопки. Дополнительно запишите, что перекрывает кнопку: клавиатура, панель сайта или граница контейнера.
Ниже — учебный пример, а не замеры клиентского проекта. Все значения условные, в CSS-пикселях; масштаб равен 1, форма находится в основном документе.
| Что измеряем | До фокуса | Клавиатура открыта |
|---|---|---|
| Высота области раскладки | 800 | 800 |
| Высота видимой области | 800 | 460 |
| Верх видимой области от начала документа | 0 | 40 |
| Нижний край кнопки от начала документа | 760 | 760 |
| Перекрывающий элемент | Нет | Клавиатура |
В этом примере видимая область заканчивается на отметке 40 + 460 = 500, а кнопка заканчивается на 760. Это объясняет выход кнопки за нижнюю границу, но ещё не устанавливает, какой CSS-блок нужно менять.
Для такого сравнения координаты должны иметь одно начало отсчёта. По MDN, visualViewport.pageTop даёт положение видимой области относительно начала документа. Границы элемента получают через getBoundingClientRect(); для координат документа учитывают window.scrollY. Не смешивайте эти значения с физическими пикселями скриншота.
Проверьте также верх кнопки и фактическое перекрытие соседними блоками. Попадание прямоугольника в видимую область ещё не доказывает, что по нему можно нажать. Для формы внутри iframe нужна отдельная проверка внешнего окна и вложенного документа.
Как принять исправление на телефоне
До начала работы согласуйте устройства и браузеры, на которых воспроизводится ошибка, и ожидаемое поведение кнопки: она постоянно видна либо доступна обычной прокруткой формы. Сравнивайте исходную и исправленную версии по одному сценарию.
- Активное поле и введённый текст видны при открытой клавиатуре.
- До кнопки и обязательного согласия можно добраться без потери ввода и без закрытия формы.
- Переход между полями не вызывает повторяющихся прыжков или самопроизвольного снятия фокуса.
- Сообщение валидации остаётся доступным; выросшая из-за ошибки форма прокручивается.
- После поворота телефона, закрытия клавиатуры и повторного открытия формы нет пустой области или застрявшей панели.
- Увеличение страницы и работа с внешней клавиатурой не становятся недоступными из-за исправления.
- Обычная версия страницы и другие всплывающие окна продолжают работать.
Кнопка, видимая на одном скриншоте, ещё не означает исправление. Нужен повторяемый проход: открыть форму, перейти между полями, прокрутить, закрыть клавиатуру и открыть её снова.
Проверку реальной отправки выполняйте отдельно на согласованном тестовом контуре. Для неё есть чек-лист полного пути заявки: доступность кнопки не подтверждает доставку обращения.
Когда достаточно своей команды
Владелец проекта может собрать воспроизведение и согласовать критерии приёмки. Если разработчик нашёл один проблемный контейнер, проверил правку на нужных устройствах и не затронул другие формы, отдельная большая переделка сайта не требуется.
Помощь полезна, когда форма собрана из нескольких компонентов, сбой зависит от встроенного браузера или исправление одной панели ломает остальные. В рамках доработки сайта в OpenStart можно начать с одной воспроизводимой задачи: согласовать диагностику, объём изменения и проверку результата.
Для оценки достаточно адреса страницы без закрытых параметров, описания устройства, шагов воспроизведения и ожидаемого поведения. Менеджер уточнит детали; состав и стоимость работ согласуют до начала. Пароли и данные посетителей для первого обращения не нужны.