Passer à la vue mobile

Aperçu de la fenêtre d’affichage mobile en un clic pour n’importe quelle page.

Les internautes modernes ne restent pas inactifs. Ils passent des écrans 27 pouces au travail aux écrans de poche dans le train, et s'attendent à ce que chaque site soit conçu sur mesure pour les deux. Pour les designers, les développeurs, les marketeurs et même les utilisateurs expérimentés, cela soulève une question quotidienne : « À quoi ressemblera cette page sur un vrai téléphone ? » Les outils de développement de Chrome peuvent y répondre, après avoir fouillé dans les menus, les panneaux et une multitude de cadres. Passer à l'affichage mobile réduit ce parcours à un simple clic ou raccourci. Appuyez sur l'icône de la barre d'outils (ou appuyez sur Alt + M) et la page actuelle est instantanément réduite à la taille d'un téléphone. Un fond gris clair isole la page du reste de la fenêtre du navigateur, mettant votre contenu en valeur et vous rappelant visuellement que la vue mobile est active. Un petit badge apparaît dans le coin, indiquant le préréglage de l'appareil actuel (à commencer par l'iPhone 14). L'extension est livrée avec trois des points d'arrêt les plus demandés : iPhone 14 (390 × 844 px), Pixel 7 (412 × 915 px) et iPad mini (768 × 1024 px). Chaque préréglage ajuste la balise meta viewport, la largeur des éléments et le comportement de défilement pour reproduire l'expérience utilisateur de l'appareil choisi. Qui en profite ? Les développeurs front-end peuvent détecter les régressions de mise en page en quelques secondes sans ouvrir DevTools, ce qui est idéal pour jongler avec plusieurs branches ou serveurs de préparation. Les concepteurs d'interface utilisateur/UX bénéficient d'un contrôle de cohérence rapide avant d'envoyer de nouvelles compositions Figma à l'ingénierie. Les équipes d'assurance qualité peuvent créer des scripts de raccourcis clavier dans des suites de tests automatisées pour des tests réactifs plus rapides. Les créateurs de contenu et les spécialistes du marketing prévisualisent les newsletters, les pages de destination et les intégrations sociales pour garantir la lisibilité sur les petits écrans. Les agents du support client reproduisant les problèmes signalés par les utilisateurs mobiles n'ont plus besoin d'appareils physiques ou de simulateurs. Les enseignants et les étudiants qui explorent les concepts de conception réactive bénéficient d'un bac à sable accessible et sécurisé par autorisation. Que vous affiniez un flux de paiement quelques minutes avant le lancement ou que vous enseigniez à une classe pleine de développeurs en herbe, cette extension s'intègre dans votre flux de travail avec une courbe d'apprentissage presque nulle.