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

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

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

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

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

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

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

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

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

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

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

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

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

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