Тестування на мобільних пристроях
Використовуй перемикач адаптивного viewport у builder для швидкої перевірки, а потім публікуй і тестуй на справжньому пристрої все, що стосується поведінки, характерної лише для мобільних.
У Proyecta є два рівні мобільного тестування: адаптивний попередній перегляд у builder та тестування на реальному пристрої за опублікованою URL-адресою.
Адаптивний попередній перегляд у builder
Section titled “Адаптивний попередній перегляд у builder”Панель попереднього перегляду містить перемикач viewport в адресному рядку:
| Режим | Розміри |
|---|---|
| Desktop | Повна ширина вікна |
| Tablet | 768 × 1024 |
| Mobile | 375 × 667 |
Перемикайся між режимами під час редагування, щоб завчасно виявляти проблеми з макетом. Це найшвидший спосіб помітити очевидні баги адаптивності (переповнення, зламані сітки, кнопки, на які не можна натиснути).
Тестування на реальному пристрої
Section titled “Тестування на реальному пристрої”Перемикач viewport лише симулює розміри екрана — він не симулює дотикове введення, реальну затримку мережі, особливості мобільних браузерів або поведінку, специфічну для платформи. Для всього, що для тебе справді важливо (дотикові взаємодії, запити на встановлення, push-сповіщення, камера, GPS), тестуй на реальному пристрої:
- Опублікуй свій застосунок у його піддомені
*.proyecta.live - Відкрий URL-адресу у браузері свого телефону
- Якщо ти додав підтримку PWA, вибери Add to Home Screen і протестуй встановлений досвід
- Пройди сценарії, які тебе цікавлять
Що можна виявити лише на реальному пристрої
Section titled “Що можна виявити лише на реальному пристрої”- Розмір областей натискання — пальці більші за курсор миші
- Закріплені елементи — одиниці viewport поводяться інакше з chrome мобільного браузера
- Введення у форми — автозаповнення, типи клавіатури, autocomplete
- Особливості iOS Safari — проблеми з
100vh, відскокування при прокрутці, фіксоване позиціонування - Потік запиту дозволу на push-сповіщення — працює лише на опублікованому origin через HTTPS у вкладці браузера верхнього рівня; не спрацює всередині панелі попереднього перегляду builder (навіть коли preview вже обслуговується через HTTPS).
- Продуктивність на реальному (повільнішому) залізі
Поради з тестування
Section titled “Поради з тестування”- Використовуй інструменти розробника на телефоні. Safari на macOS може підключатися до мобільного Safari для live-налагодження; Chrome може підключатися до Android Chrome.
- Тестуй і в альбомній орієнтації. Більшість розробників тестують лише портретну орієнтацію і пропускають баги альбомної.
- Тестуй із увімкненим режимом економії заряду. Анімації та таймери поводяться по-іншому.
- Тестуй push для PWA на справжньому iPhone. Push-сповіщення на iOS працюють лише з PWA, встановленого через Safari.