Testează pe Mobil
Folosește selectorul de viewport responsiv din builder pentru o verificare rapidă, apoi publică și testează pe un dispozitiv real pentru orice comportament specific dispozitivelor mobile.
În Proyecta există două niveluri de testare pe mobil: previzualizarea responsivă din builder și testarea pe un dispozitiv real, pe un URL publicat.
Previzualizare responsivă în builder
Secțiune intitulată „Previzualizare responsivă în builder”Panoul de previzualizare include un selector de viewport în bara de adresă:
| Mod | Dimensiuni |
|---|---|
| Desktop | Lățimea completă a ferestrei |
| Tablet | 768 × 1024 |
| Mobile | 390 × 844 |
Comută între ele în timp ce editezi pentru a depista problemele de layout din timp. Aceasta este cea mai rapidă metodă de a prinde bug-uri evidente de responsive (overflow, grid-uri stricate, butoane pe care nu se poate da tap).
Deschide aplicația pe telefon cu un cod QR
Secțiune intitulată „Deschide aplicația pe telefon cu un cod QR”Cea mai rapidă metodă de a ajunge pe un dispozitiv real este tab-ul Mobile → Test din dashboard. După ce aplicația ta este publicată, acesta afișează un cod QR — scanează-l cu camera telefonului pentru a deschide aplicația live instant. Există și un buton Copy link dacă preferi să îți trimiți URL-ul. (Dacă nu ai publicat încă, tab-ul te îndeamnă să publici mai întâi — testarea pe dispozitiv necesită un URL live.)
Testează pe un dispozitiv real
Secțiune intitulată „Testează pe un dispozitiv real”Selectorul de viewport simulează doar dimensiunile — nu simulează input touch, latența din lumea reală, particularitățile browserelor mobile sau comportamentele specifice platformei. Pentru orice îți pasă cu adevărat (interacțiuni touch, prompturi de instalare, notificări push, cameră, GPS), testează pe un dispozitiv real:
- Publică aplicația pe subdomeniul
*.proyecta.live - Deschide URL-ul în browserul telefonului tău
- Dacă ai adăugat suport PWA, alege Add to Home Screen și testează experiența instalată
- Parcurge fluxurile care îți sunt importante
Lucruri pe care le poți depista doar pe un dispozitiv real
Secțiune intitulată „Lucruri pe care le poți depista doar pe un dispozitiv real”- Dimensiunile țintelor de tap — degetele sunt mai mari decât cursorul mouse-ului
- Elementele sticky — unitățile de viewport se comportă diferit cu chrome-ul browserului mobil
- Input din formulare — autofill, tipuri de tastatură, autocomplete
- Particularitățile iOS Safari — probleme cu
100vh, scroll-bouncing, poziționare fixă - Fluxul de permisiuni pentru notificări push — funcționează doar pe un origin publicat, peste HTTPS, într-un tab de browser de nivel superior; nu se va declanșa în interiorul panoului de previzualizare al builder-ului (chiar și atunci când previzualizarea este deja servită peste HTTPS).
- Performanța pe hardware real (mai lent)
Sfaturi de testare
Secțiune intitulată „Sfaturi de testare”- Folosește instrumentele pentru dezvoltatori ale telefonului tău. Safari pe macOS se poate conecta la Safari mobil pentru debugging live; Chrome se poate conecta la Chrome pe Android.
- Testează și în landscape. Majoritatea dezvoltatorilor testează doar în portrait și ratează bug-urile din landscape.
- Testează cu modul low-power activat. Animațiile și timer-ele se comportă diferit.
- Testează pe un iPhone real pentru notificări push PWA. Notificările push pe iOS funcționează doar dintr-un PWA instalat prin Safari.