Тестування на мобільному пристрої

Використовуйте перемикач адаптивного viewport у builder для швидкої перевірки, а потім публікуйте та тестуйте на реальному пристрої все, що стосується поведінки, притаманної лише мобільним.

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

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

Панель preview містить перемикач viewport у рядку адреси:

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

Перемикайтеся між ними під час редагування, щоб завчасно виявляти проблеми з макетом. Це найшвидший спосіб знайти очевидні адаптивні баги (переповнення, зламані сітки, кнопки, на які важко натиснути).

Відкрийте застосунок на телефоні за допомогою QR-коду

Найшвидший спосіб потрапити на реальний пристрій — вкладка Mobile → Test у dashboard. Після публікації застосунку там з’являється QR-код — відскануйте його камерою телефону, щоб миттєво відкрити живий застосунок. Також є кнопка Copy link, якщо ви хочете надіслати собі посилання іншим способом. (Якщо ви ще не публікували застосунок, вкладка запропонує зробити це спочатку — тестування на пристрої потребує живого URL.)

Тестування на реальному пристрої

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

Опублікуйте застосунок у субдомені *.proyecta.live
Відкрийте URL у браузері телефону
Якщо ви додали підтримку PWA, виберіть Add to Home Screen і протестуйте встановлений застосунок
Пройдіться по сценаріях, які вас цікавлять

Що можна виявити лише на реальному пристрої

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

Поради щодо тестування

Використовуйте інструменти розробника на телефоні. Safari на macOS може підключатися до мобільного Safari для живого налагодження; Chrome може підключатися до Android Chrome.
Тестуйте також у горизонтальній орієнтації. Більшість розробників тестують лише вертикальну орієнтацію і пропускають пов’язані баги.
Тестуйте з увімкненим режимом економії енергії. Анімації та таймери поводяться по-іншому.
Тестуйте push-сповіщення PWA на реальному iPhone. Push-сповіщення на iOS працюють лише з PWA, встановленого через Safari.