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 spécifiques au mobile.

Les tests mobiles dans Proyecta se font à deux niveaux : l’aperçu responsive intégré 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 :

ModeDimensions
DesktopLargeur complète de la fenêtre
Tablet768 × 1024
Mobile375 × 667

Passe de l’un à l’autre pendant l’édition pour repérer rapidement les problèmes de mise en page. C’est le moyen le plus rapide de détecter les bugs responsive évidents (débordements, grilles cassées, boutons impossibles à toucher).

Le sélecteur de viewport ne fait que simuler des dimensions — il ne simule pas les interactions tactiles, la latence réelle, les particularités des navigateurs mobiles ou les comportements propres à 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 application 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 une fois installée
  4. Parcours les flux qui t’importent

Ce qu’on ne peut détecter que sur un vrai appareil

Section intitulée « Ce qu’on ne peut détecter que sur un vrai appareil »
  • Taille des zones tactiles — les doigts sont plus grands que les pointeurs de souris
  • Éléments sticky — les unités de viewport se comportent différemment avec le chrome du navigateur mobile
  • Saisie dans les formulaires — remplissage automatique, types de clavier, autocomplétion
  • Particularités d’iOS Safari — problèmes avec 100vh, rebond au défilement, positionnement fixe
  • Flux de demande de permission pour les notifications push — fonctionne uniquement sur une origine publiée en HTTPS dans un onglet de navigateur de premier niveau ; ne se déclenchera pas à l’intérieur du panneau de prévisualisation du builder (même si la prévisualisation est déjà servie en HTTPS).
  • 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 déboguer en direct ; Chrome peut se connecter à Chrome sur Android.
  • Teste aussi en mode paysage. La plupart des développeurs testent uniquement en portrait et passent à côté des bugs en mode paysage.
  • Teste avec le mode basse consommation activé. Les animations et les minuteries 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.