Тестирование на мобильных устройствах

Используй переключатель адаптивного viewport в builder для быстрой проверки, затем опубликуй приложение и протестируй его на реальном устройстве для всего, что касается поведения, специфичного для мобильных.

В Proyecta мобильное тестирование состоит из двух уровней: адаптивный preview внутри builder и тестирование на реальном устройстве по опубликованному URL.

Адаптивный preview в builder

Панель preview включает переключатель viewport в адресной строке:

Режим	Размеры
Desktop	Полная ширина окна
Tablet	768 × 1024
Mobile	390 × 844

Переключайся между режимами в процессе редактирования, чтобы быстро выявлять проблемы с макетом. Это самый быстрый способ поймать очевидные баги адаптивности (переполнение, сломанные сетки, кнопки, по которым невозможно попасть пальцем).

Открой приложение на телефоне с помощью QR-кода

Самый быстрый способ перейти на реальное устройство — вкладка Mobile → Test в дашборде. После публикации приложения там отображается QR-код — отсканируй его камерой телефона, чтобы мгновенно открыть live-приложение. Есть также кнопка Copy link, если удобнее отправить себе URL. (Если приложение ещё не опубликовано, вкладка предложит сначала опубликовать его — для тестирования на устройстве нужен живой URL.)

Тестирование на реальном устройстве

Переключатель viewport только симулирует размеры экрана — он не воспроизводит сенсорный ввод, реальные задержки сети, особенности мобильных браузеров или платформо-зависимое поведение. Для всего, что действительно важно (тач-взаимодействия, запросы на установку, push-уведомления, камера, GPS), тестируй на реальном устройстве:

Опубликуй приложение в его поддомене *.proyecta.live
Открой URL в браузере на телефоне
Если добавлена поддержка PWA, выбери Add to Home Screen и проверь опыт установленного приложения
Пройди по сценариям, которые важны для тебя

Что можно выявить только на реальном устройстве

Размер области нажатия — пальцы больше курсора мыши
Фиксированные элементы — viewport-единицы ведут себя иначе при наличии chrome мобильного браузера
Ввод в формах — автозаполнение, типы клавиатуры, autocomplete
Особенности iOS Safari — проблемы с 100vh, резиновая прокрутка, fixed-позиционирование
Поток запроса разрешения на push-уведомления — работает только на опубликованном origin через HTTPS в браузерной вкладке верхнего уровня; не сработает внутри панели preview в builder (даже если preview уже обслуживается через HTTPS).
Производительность на реальном (более медленном) железе

Советы по тестированию

Используй инструменты разработчика на телефоне. Safari на macOS может подключаться к мобильному Safari для live-отладки; Chrome может подключаться к Android Chrome.
Тестируй в альбомной ориентации тоже. Большинство разработчиков проверяют только портретную и пропускают баги в landscape.
Тестируй с включённым режимом энергосбережения. Анимации и таймеры ведут себя иначе.
Тестируй push-уведомления PWA на реальном iPhone. Push-уведомления на iOS работают только из PWA, установленного через Safari.