Aller au contenu

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.

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).

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.)

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 :

  1. Publie ton app sur son sous-domaine *.proyecta.live
  2. Ouvre l’URL dans le navigateur de ton téléphone
  3. Si tu as ajouté le support PWA, choisis Add to Home Screen et teste l’expérience installée
  4. Parcours les flux qui t’importent
  • 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)
  • 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.