Qu'est-ce que le mode appareil du navigateur ?

Qu'est-ce que le mode appareil du navigateur ?

Le mode appareil du navigateur est une fonction des outils de développement, comme Chrome DevTools, qui fait réagir une fenêtre de bureau comme un smartphone ou une tablette. Il règle la taille du viewport et la densité de pixels, peut déclencher des événements tactiles à la place des clics et peut ralentir le réseau et le processeur. Chrome le décrit comme une approximation de premier ordre d'un appareil réel, pas comme un remplaçant.

Comment il fonctionne

Dans Chrome, ouvrez DevTools et cliquez sur le bouton d'affichage de la barre d'appareils (Toggle device toolbar). Il y a deux modes (voir la documentation de Chrome sur le mode appareil) :

• Viewport adaptatif : faites glisser les poignées ou saisissez une largeur et une hauteur pour voir où votre mise en page casse. Une barre de largeurs propose des valeurs de 320 px à 2560 px, et Show media queries affiche vos points de rupture CSS au-dessus du viewport pour passer de l'un à l'autre d'un clic.
• Appareil précis : choisissez un smartphone ou une tablette dans la liste Dimensions pour reprendre la taille de son écran, passez en paysage ou ajoutez un appareil personnalisé.

La barre contrôle aussi la densité de pixels (DPR) et le type d'appareil : Mobile déclenche des événements tactiles, Mobile (no touch) des événements de clic. La liste de limitation propose deux réglages : Mid-tier mobile simule une 3G rapide avec un processeur quatre fois plus lent, et Low-end mobile une 3G lente avec un processeur six fois plus lent. La position et l'orientation se règlent dans le panneau Sensors.

Exemple : un menu qui casse sur smartphone

Votre navigation est correcte à 1440 px. En mode appareil, vous choisissez une largeur de smartphone et le menu déborde parce qu'une règle de largeur fixe n'a jamais été adaptée. La barre des media queries montre qu'il n'existe aucun point de rupture sous 768 px, vous en ajoutez un. Vous passez ensuite la limitation sur Mid-tier mobile, rechargez, et l'image principale met plusieurs secondes à apparaître. C'est un problème de Largest Contentful Paint que vous ne verriez jamais sur le wifi du bureau.

Ce que le mode appareil ne peut pas vous dire

Chrome le dit clairement : avec le mode appareil, vous n'exécutez pas réellement votre code sur un appareil mobile. Les processeurs mobiles sont conçus autrement que ceux des portables et des ordinateurs de bureau ; la limitation ralentit donc votre ordinateur sans en faire un smartphone. En cas de doute, Chrome conseille d'exécuter la page sur un vrai appareil avec le débogage à distance.

Erreurs courantes

• Prendre l'émulation pour un test sur appareil. Les vrais navigateurs, le vrai matériel et les vrais réseaux se comportent autrement. Utilisez le mode appareil pour trouver vite les défauts de mise en page et de viewport, puis confirmez sur au moins un vrai smartphone.
• Ne tester qu'une taille de smartphone. Consultez les viewports de vos propres statistiques et faites glisser les poignées pour trouver des points de rupture imprévus.
• Juger la vitesse sur une seule mesure limitée. Une exécution sur un portable occupé est bruitée. Répétez-la ou mesurez avec un outil planifié.
• Oublier la densité de pixels. Une image floue sur un écran haute densité n'apparaît que si la DPR correspond à celle de l'appareil réel.
• Concevoir d'abord pour le bureau. Regarder le mobile à la fin rend les corrections coûteuses. Voir la conception mobile-first.

Mode appareil, tests et surveillance

Le mode appareil est un contrôle manuel et ponctuel. Pour le rendre reproductible, faites tourner les mêmes pages selon un calendrier : la surveillance de vitesse de LoadFocus lance des audits Lighthouse sur ordinateur et mobile depuis 25 régions cloud et vous alerte quand les métriques changent. Pour les chiffres de vos vrais visiteurs, le vérificateur gratuit de Core Web Vitals affiche les données de terrain du Chrome UX Report sur mobile et ordinateur, et PageSpeed Insights est un outil voisin de laboratoire et de terrain. Nos articles sur le test de sites dans des émulateurs de smartphone et de tablette et la planification de l'émulation mobile approfondissent les tests, et l'entrée Core Web Vitals explique les métriques.

Questions fréquentes : mode appareil du navigateur

Comment ouvrir le mode appareil dans Chrome ?

Ouvrez Chrome DevTools, puis cliquez sur le bouton d'affichage de la barre d'appareils en haut de la fenêtre DevTools. Choisissez Responsive ou un appareil précis dans la barre.

Est-ce la même chose qu'un test sur un vrai smartphone ?

Non. Il approche la taille d'écran, la densité de pixels, la saisie tactile et les conditions réseau, mais votre code s'exécute toujours sur votre propre ordinateur. Les processeurs mobiles diffèrent de ceux de bureau, les performances peuvent donc beaucoup varier.

Que fait la limitation Mid-tier mobile ?

Elle simule une connexion 3G rapide et ralentit le processeur d'un facteur quatre. Low-end mobile simule une 3G lente et un processeur six fois plus lent.

Peut-on tester les événements tactiles en mode appareil ?

En partie. Avec le type d'appareil Mobile, la souris produit des événements tactiles, ce qui aide à vérifier les gestionnaires de toucher. Tous les gestes et la sensation d'un vrai écran ne sont pas reproduits.

Le mode appareil change-t-il ce que voit Google ?

Non. Le mode appareil modifie seulement la façon dont votre propre navigateur affiche et charge la page. Il ne change ni votre site, ni votre classement, ni les données des rapports de terrain.