Tester sur mobile
Utilise le sélecteur de viewport responsive dans le builder pour une vérification rapide, puis publie et teste sur un vrai appareil pour tout ce qui touche aux comportements mobiles spécifiques.
Les tests mobiles dans Proyecta se déroulent à deux niveaux : la prévisualisation responsive intégrée au builder, et les tests sur un vrai appareil à partir d’une URL publiée.
Prévisualisation responsive dans le builder
Section intitulée « Prévisualisation responsive dans le builder »Le panneau de prévisualisation inclut un sélecteur de viewport dans la barre d’adresse :
| Mode | Dimensions |
|---|---|
| Desktop | Largeur totale fenêtre |
| Tablet | 768 × 1024 |
| Mobile | 390 × 844 |
Bascule entre ces modes pendant l’édition pour repérer les problèmes de mise en page rapidement. C’est le moyen le plus rapide de détecter les bugs responsive évidents (débordements, grilles cassées, boutons impossibles à taper).
Ouvre l’app sur ton téléphone avec un QR code
Section intitulée « Ouvre l’app sur ton téléphone avec un QR code »Le moyen le plus rapide de tester sur un vrai appareil est l’onglet Mobile → Test du dashboard. Une fois ton app publiée, il affiche un QR code — scanne-le avec l’appareil photo de ton téléphone pour ouvrir l’app en direct instantanément. Un bouton Copy link est également disponible si tu préfères t’envoyer l’URL. (Si tu n’as pas encore publié, l’onglet t’invite à publier d’abord — les tests sur appareil nécessitent une URL en ligne.)
Tester sur un vrai appareil
Section intitulée « Tester sur un vrai appareil »Le sélecteur de viewport simule uniquement des dimensions — il ne simule pas les interactions tactiles, la latence réelle, les particularités du navigateur mobile, ni les comportements spécifiques à chaque plateforme. Pour tout ce qui compte vraiment (interactions tactiles, invites d’installation, notifications push, caméra, GPS), teste sur un vrai appareil :
- Publie ton app sur son sous-domaine
*.proyecta.live - Ouvre l’URL dans le navigateur de ton téléphone
- Si tu as ajouté le support PWA, choisis Add to Home Screen et teste l’expérience installée
- Parcours les flux qui t’importent
Ce que seul un vrai appareil permet de détecter
Section intitulée « Ce que seul un vrai appareil permet de détecter »- La taille des zones de tap — les doigts sont plus grands que les pointeurs de souris
- Les éléments sticky — les unités de viewport se comportent différemment avec le chrome du navigateur mobile
- La saisie dans les formulaires — remplissage automatique, types de clavier, autocomplete
- Les particularités d’iOS Safari — problèmes avec
100vh, rebond au scroll, positionnement fixe - Le flux d’autorisation des notifications push — ne fonctionne que sur une origine publiée en HTTPS dans un onglet de navigateur de premier niveau ; il ne se déclenchera pas dans le panneau de prévisualisation du builder (même si la prévisualisation est déjà servie en HTTPS).
- Les performances sur du matériel réel (plus lent)
Conseils pour les tests
Section intitulée « Conseils pour les tests »- Utilise les outils de développement de ton téléphone. Safari sur macOS peut se connecter à Safari mobile pour du débogage en direct ; Chrome peut se connecter à Chrome sur Android.
- Teste aussi en mode paysage. La plupart des développeurs testent uniquement en portrait et ratent les bugs en paysage.
- Teste avec le mode basse consommation activé. Les animations et les timers se comportent différemment.
- Teste sur un vrai iPhone pour les notifications push PWA. Les notifications push sur iOS ne fonctionnent qu’à partir d’une PWA installée via Safari.