Tester sur différents appareils

Vous avez construit votre mise en page, défini vos points de rupture et utilisé des unités fluides. Maintenant, vous devez vérifier si cela fonctionne réellement. Silex vous offre des boutons de prévisualisation d'appareil pour simuler les tailles d'écran directement dans l'éditeur, mais ce que les tests dans l'éditeur peuvent vous apprendre a ses limites. Cette page couvre comment tester efficacement sans quitter l'éditeur, et quand il faut aller plus loin.

Deux points à garder à l'esprit :

• La prévisualisation de l'éditeur est une simulation, pas un vrai appareil. Elle redimensionne le canvas pour correspondre à une largeur d'appareil, mais ne reproduit pas le comportement tactile, les différences réelles de rendu des navigateurs ni les barres d'adresse mobiles.
• Testez tôt et testez souvent. Corriger un problème responsive quand vous avez deux éléments est simple. En corriger un après avoir construit vingt pages est pénible.

Utiliser les boutons de prévisualisation d'appareil

Les boutons de prévisualisation d'appareil se trouvent dans la barre d'outils supérieure. Chaque bouton représente une largeur de point de rupture configurée. Cliquer dessus redimensionne le canvas pour montrer l'apparence de votre mise en page à cette largeur.

Comment tester avec les boutons d'appareil :

1. Commencez sur l'appareil desktop (la vue la plus large). Examinez la mise en page -- vérifiez l'alignement, l'espacement et le débordement de texte.
2. Cliquez sur le bouton d'appareil plus étroit suivant. Cherchez les éléments qui se chevauchent, le texte qui sort de l'écran ou les images qui débordent de leurs conteneurs.
3. Continuez à cliquer sur chaque appareil, le plus étroit en dernier. À chaque largeur, vérifiez :
4. La navigation fonctionne-t-elle toujours ? Les liens sont-ils accessibles ?
5. Les images tiennent-elles dans leurs conteneurs ?
6. Le texte est-il lisible sans défilement horizontal ?
7. Les mises en page flex s'empilent-elles correctement ?
8. Les gaps et le padding sont-ils proportionnels ?
9. Repassez sur desktop et confirmez que vous n'avez pas accidentellement modifié des styles de base.

Ce qu'il faut vérifier à chaque point de rupture :

Vérification	Ce qui pourrait mal se passer
Débordement de texte	Des mots longs ou des titres qui dépassent de leur conteneur
Débordement d'images	Des photos plus larges que leur élément parent
Défilement horizontal	Du contenu qui pousse la page au-delà de la largeur du viewport
Taille des zones tactiles	Des boutons et liens trop petits pour être tapés (visez au moins 44x44 pixels)
Ordre d'empilement	Des éléments qui devraient s'empiler verticalement restent côte à côte
Espaces blancs	Du padding excessif qui gaspille de l'espace sur les petits écrans
Contenu masqué	Des éléments définis à display: none qui devraient être visibles, ou inversement

Modifier à une largeur d'appareil spécifique

Quand vous trouvez un problème à un point de rupture particulier, corrigez-le sur place. Le Style Manager est contextuel -- les styles que vous modifiez pendant qu'un appareil est actif sont limités à la media query de ce point de rupture.

1. Cliquez sur le bouton d'appareil où le problème apparaît
2. Sélectionnez l'élément à corriger
3. Ajustez la propriété dans le Style Manager
4. Passez aux appareils adjacents pour vous assurer que la correction n'a pas créé de nouveaux problèmes

Vérifiez toujours un point de rupture plus large et un plus étroit que celui que vous avez modifié. Une correction à 768px peut sembler parfaite ici mais provoquer un comportement inattendu à 1024px ou 480px à cause de la cascade des media queries max-width.

Prévisualiser la page publiée

Le canvas de l'éditeur est utile pour les vérifications rapides, mais ce n'est pas un vrai navigateur. Pour un test plus précis, utilisez la fonctionnalité de prévisualisation ou de publication :

1. Publiez votre site (ou utilisez la fonctionnalité de prévisualisation si disponible)
2. Ouvrez l'URL publiée dans un navigateur classique
3. Utilisez les outils de design responsive intégrés du navigateur (voir ci-dessous)

Outils de développement du navigateur

Chaque navigateur moderne intègre des outils de test responsive :

• Chrome/Edge : Appuyez sur F12, puis cliquez sur l'icône de la barre d'outils d'appareil (ou appuyez sur Ctrl+Shift+M). Vous pouvez sélectionner des appareils prédéfinis ou saisir des dimensions personnalisées.
• Firefox : Appuyez sur F12, puis cliquez sur l'icône du mode design responsive (ou appuyez sur Ctrl+Shift+M). Mêmes préréglages d'appareils et dimensionnement personnalisé.
• Safari : Activez le menu Développer dans les préférences, puis utilisez Développer > Passer en mode de création réactif.

Ces outils simulent la largeur du viewport plus précisément que le canvas de l'éditeur car ils utilisent le vrai moteur de rendu du navigateur avec de vraies media queries.

Vérifier sur de vrais appareils

Les simulations sont des approximations. Les vrais appareils ont des différences que les simulations ne captent pas :

• Comportement tactile : les états de survol ne fonctionnent pas de la même manière sur les écrans tactiles. Un menu déroulant qui s'ouvre au survol ne fonctionnera pas sur un téléphone.
• Chrome du navigateur mobile : la barre d'adresse et la barre de navigation inférieure des navigateurs mobiles changent la hauteur visible du viewport. Les éléments dimensionnés avec vh peuvent se comporter différemment de ce qui est attendu.
• Rendu des polices : le texte peut avoir un aspect différent selon les systèmes d'exploitation et les navigateurs. Une police qui s'affiche nettement sur votre desktop peut paraître plus lourde ou plus légère sur mobile.
• Performance : les mises en page complexes avec beaucoup d'éléments et de grandes images peuvent ralentir sur les appareils moins puissants.

Test rapide sur un vrai appareil : 1. Publiez votre site 2. Ouvrez l'URL sur votre téléphone ou tablette 3. Testez en orientation portrait et paysage 4. Tapez sur tous les éléments interactifs 5. Faites défiler chaque page

Si vous n'avez pas d'appareil physique, les outils de développement du navigateur sont la meilleure alternative. Mais pour une vérification finale avant le lancement, testez sur au moins un vrai téléphone.

Liste de vérification pour les tests

Passez en revue cette liste pour chaque page de votre site :

• [ ] Desktop (1200px+) : mise en page correcte, texte lisible, images nettes
• [ ] Tablette paysage (1024px) : pas de débordement, navigation accessible
• [ ] Tablette portrait (768px) : les colonnes s'empilent correctement, taille du texte confortable
• [ ] Mobile (480px ou moins) : mise en page une colonne, zones tactiles de taille suffisante, pas de défilement horizontal
• [ ] Toutes les images ont max-width: 100% ou sont autrement contraintes
• [ ] La navigation fonctionne à toutes les largeurs
• [ ] Aucun texte ne déborde de son conteneur
• [ ] Les éléments interactifs (boutons, liens, champs de formulaire) sont assez grands pour être tapés
• [ ] La page publiée est testée dans au moins un vrai navigateur en dehors de l'éditeur

Erreurs courantes

• Ne tester qu'aux largeurs exactes des points de rupture. Les vrais utilisateurs ont des écrans de toutes les largeurs possibles. Testez aussi aux largeurs entre vos points de rupture -- redimensionnez le navigateur lentement et surveillez les états intermédiaires problématiques.
• Supposer que la prévisualisation de l'éditeur suffit. La prévisualisation du canvas n'inclut pas le comportement de la balise meta viewport, le chrome du navigateur mobile ni les interactions tactiles. Testez toujours la page publiée.
• Corriger un appareil et casser un autre. Chaque modification à un point de rupture se propage aux largeurs plus étroites. Vérifiez toujours les points de rupture adjacents après une correction.
• Ignorer l'orientation paysage sur les téléphones. Un téléphone en paysage a un viewport large et court -- différent de tout point de rupture standard. Assurez-vous que votre mise en page le gère.
• Ne tester que sur votre propre appareil. Votre téléphone n'est qu'un modèle parmi des centaines. Au minimum, vérifiez quelques largeurs de viewport différentes dans les outils de développement du navigateur.
• Toujours bloqué ? Ouvrez un ticket sur GitHub avec les étapes de reproduction, ou posez la question dans le chat communautaire.

En savoir plus

• MDN : Design responsive -- guide complet du design responsive
• MDN : Utiliser les media queries -- référence des media queries
• Points de rupture -- configurer et gérer les points de rupture dans Silex
• Techniques responsives -- unités fluides et dimensionnement
• Flexbox -- techniques de mise en page qui affectent le comportement responsive

---

Avancé : déboguer les problèmes responsives

Trouver l'élément qui cause le défilement horizontal

Si votre page a une barre de défilement horizontale sur mobile, un élément est plus large que le viewport. Pour le trouver :

1. Ouvrez les outils de développement du navigateur sur la page publiée
2. En mode responsive, définissez la largeur sur votre point de rupture mobile
3. Cherchez les éléments qui dépassent du bord droit -- ils auront une barre de défilement ou un débordement visible
4. Coupables habituels : images sans max-width: 100%, éléments avec des largeurs fixes en pixels, éléments avec un padding ou margin horizontal important

Déboguer la cascade des media queries

Si un style ne s'applique pas comme prévu à un point de rupture :

1. Dans l'éditeur, vérifiez quel appareil est actif -- le nom de l'appareil apparaît dans la barre d'outils
2. Sélectionnez l'élément et regardez le Style Manager. Les propriétés surchargées au point de rupture actuel affichent leur valeur spécifique au point de rupture.
3. Si une propriété affiche la mauvaise valeur, vérifiez si un point de rupture plus large la définit. Rappelez-vous : les requêtes max-width se propagent vers le bas, donc un style à 1024px s'applique aussi à 768px sauf s'il est surchargé à 768px.

Tester la performance sur les connexions lentes

Les utilisateurs mobiles ont souvent des connexions plus lentes. Les grandes images et les mises en page complexes peuvent rendre la page lente. Utilisez l'onglet Network des Chrome DevTools pour limiter la vitesse de connexion et voir comment votre page se charge dans des conditions contraintes.

Référence : raccourcis de test responsive des navigateurs

Navigateur	Ouvrir les DevTools	Basculer en mode responsive
Chrome	F12 ou Ctrl+Shift+I	Ctrl+Shift+M
Edge	F12 ou Ctrl+Shift+I	Ctrl+Shift+M
Firefox	F12 ou Ctrl+Shift+I	Ctrl+Shift+M
Safari	Cmd+Option+I (avec le menu Développer activé)	Développer > Passer en mode de création réactif

Tous les navigateurs vous permettent de sélectionner des profils d'appareils prédéfinis (iPhone, iPad, Galaxy, etc.) ou de saisir des valeurs de largeur et hauteur personnalisées. Chrome et Edge permettent aussi de simuler les événements tactiles, les connexions réseau lentes et la limitation du CPU.

---

Quiz

Q1 : Vous avez corrigé un problème de mise en page au point de rupture 768px. Que devez-vous vérifier ensuite ?

• A) Uniquement la vue desktop pour s'assurer qu'elle est inchangée
• B) Les points de rupture immédiatement au-dessus et en dessous (1024px et 480px) pour détecter les effets de cascade
• C) Uniquement la vue mobile à 480px

Réponse

B) Les points de rupture immédiatement au-dessus et en dessous (1024px et 480px) pour détecter les effets de cascade -- Les modifications à un point de rupture se propagent aux largeurs plus étroites et peuvent interagir avec les styles des points de rupture plus larges. Vérifiez toujours les appareils adjacents.

Q2 : Votre site a l'air parfait dans l'éditeur Silex à chaque largeur d'appareil, mais sur un vrai téléphone le texte est minuscule et la mise en page est dézoomée. Quelle est la cause la plus probable ?

• A) Le téléphone a une taille d'écran inhabituelle
• B) La balise meta viewport est manquante ou incorrecte
• C) Les points de rupture sont incorrects

Réponse

B) La balise meta viewport est manquante ou incorrecte -- Sans la balise meta viewport, les navigateurs mobiles font le rendu à une largeur desktop virtuelle et réduisent l'échelle. Silex inclut cette balise lors de la publication, mais vérifiez qu'elle est présente dans le HTML publié.

Q3 : Vous remarquez une barre de défilement horizontale sur mobile mais pas sur tablette ni desktop. Comment trouver l'élément responsable ?

• A) Supprimer les éléments un par un jusqu'à ce que la barre de défilement disparaisse
• B) Utiliser les outils de développement du navigateur en mode responsive à la largeur mobile et chercher les éléments qui dépassent du bord du viewport
• C) Ajouter overflow: hidden au body

Réponse

B) Utiliser les outils de développement du navigateur en mode responsive à la largeur mobile et chercher les éléments qui dépassent du bord du viewport -- Les DevTools vous permettent d'inspecter et d'identifier directement l'élément qui déborde. L'option C masque le symptôme sans corriger la cause. L'option A fonctionne mais est lente et destructrice.

Q4 : Pourquoi tester sur un vrai téléphone est-il meilleur que d'utiliser les outils de développement du navigateur ?

• A) Les outils de développement du navigateur ne peuvent pas simuler différentes largeurs d'écran
• B) Les vrais téléphones montrent le comportement tactile, le rendu réel des polices et le chrome du navigateur mobile que les simulations ne peuvent pas reproduire entièrement
• C) Les outils de développement ne fonctionnent que pour les sites desktop

Réponse

B) Les vrais téléphones montrent le comportement tactile, le rendu réel des polices et le chrome du navigateur mobile que les simulations ne peuvent pas reproduire entièrement -- Les états de survol, le comportement de la barre d'adresse et les différences de rendu entre appareils sont des choses que seul le matériel réel révèle.

Q5 : Vous avez des points de rupture à 1024px, 768px et 480px. Votre mise en page a bonne mine aux trois largeurs mais casse à 600px. Que devez-vous faire ?

• A) Ajouter un nouveau point de rupture à 600px
• B) Vérifier si des techniques fluides (unités relatives, flex-wrap) pourraient corriger le problème sans nouveau point de rupture
• C) L'ignorer -- personne n'a un écran de 600px

Réponse

B) Vérifier si des techniques fluides (unités relatives, flex-wrap) pourraient corriger le problème sans nouveau point de rupture -- Avant d'ajouter des points de rupture, vérifiez si le design peut s'adapter naturellement à travers cette largeur. Si un conteneur utilise une largeur en pourcentage et flex-wrap, le problème peut se résoudre de lui-même. N'ajoutez un point de rupture que si des changements structurels sont vraiment nécessaires.