Il existe quatre façons de voir la version mobile d’un site sur ordinateur : réduire la fenêtre du navigateur, utiliser le mode appareil des DevTools de Chrome, installer une extension de vue mobile ou ouvrir la page dans un émulateur de téléphone. La première est rapide mais souvent trompeuse. Les trois autres demandent au site sa vraie mise en page mobile, et c’est en général ce que vous voulez.
Le bon choix dépend de la raison pour laquelle vous regardez. Un designer qui vérifie des espacements n’a pas les mêmes besoins qu’un marketeur qui veut voir ce que voient les clients sur iPhone, ou qu’un développeur qui traque un bug présent uniquement sur Android.
Pourquoi une fenêtre étroite n’est pas la version mobile
Tirer le bord de la fenêtre rétrécit la zone d’affichage : les media queries CSS se déclenchent et une mise en page responsive se réorganise. Cette partie fonctionne. Ce qui ne change pas, c’est tout le reste de ce que le site sait de votre appareil.
Un téléphone envoie une chaîne user agent mobile et des client hints comme Sec-CH-UA-Mobile: ?1. Il indique à JavaScript une petite taille d’écran, un ratio de pixels élevé et la prise en charge du tactile. Certains sites utilisent ces signaux pour servir une autre page, un sous-domaine m. séparé, des images plus légères ou un autre menu. Une fenêtre de bureau étroite n’envoie rien de tout cela, et vous risquez de regarder une page desktop écrasée.
Il y a aussi une limite pratique : Chrome sur ordinateur ne laisse généralement pas réduire une fenêtre bien en dessous de 500 pixels, alors que beaucoup de téléphones ont une zone d’affichage de 360 à 440 pixels CSS.
Méthode 1 : le mode appareil des DevTools de Chrome
Chrome intègre un émulateur de téléphone. Ouvrez les DevTools avec F12 (ou Cmd + Option + I sur Mac), puis appuyez sur Cmd + Shift + M sur Mac ou Ctrl + Shift + M sous Windows pour activer la barre d’appareils. Choisissez un appareil dans la liste Dimensions et rechargez la page.
Le mode appareil modifie la zone d’affichage, le ratio de pixels et le user agent, et peut passer aux événements tactiles. Il bride aussi le réseau et le CPU, ce qui aide à tester la vitesse. Google le décrit comme une « approximation de premier ordre » d’un téléphone, car le processeur et le navigateur de votre ordinateur restent ceux d’un poste de bureau.
L’inconvénient, c’est la lourdeur. Les DevTools occupent un tiers de l’écran, les préréglages sont génériques, et il faut tout reconfigurer pour chaque onglet. Nous détaillons le processus dans le guide de l’émulateur mobile de Chrome.
Méthode 2 : une extension de vue mobile
Une extension de vue mobile fait l’essentiel du même travail depuis un bouton de la barre d’outils, sans ouvrir les DevTools. Mobile View Extension pour Chrome, par exemple, recharge l’onglet courant dans un cadre de téléphone ou de tablette avec le user agent, les dimensions d’écran et le ratio de pixels de l’appareil. Vous choisissez un préréglage Apple ou Android nommé, passez du portrait au paysage et enregistrez une capture PNG de la vue encadrée.
C’est l’option la plus rapide si vous vérifiez souvent des pages, relisez le site d’un client ou voulez voir une page « comme sur un téléphone » tout en continuant à naviguer. L’aperçu reste actif d’une page à l’autre et fonctionne en localhost.
Elle a des limites à connaître. L’aperçu tourne dans un cadre à l’intérieur de Chrome sur ordinateur : aucun événement tactile n’est généré et vous utilisez toujours la souris. Les media queries hover et pointer ne sont pas entièrement émulées. Pour les gestes tactiles ou les performances sur du vrai matériel, utilisez un vrai téléphone. Les avantages et inconvénients des deux approches sont comparés dans extension de simulateur mobile ou DevTools.
Méthode 3 : un émulateur ou simulateur de téléphone
Quand il vous faut le vrai navigateur mobile, et non Chrome sur ordinateur qui se fait passer pour lui, utilisez un émulateur :
- Le Simulator de Xcode (macOS uniquement) fait tourner le vrai Safari iOS. C’est ce qui se rapproche le plus d’un iPhone sans en avoir un. Voir comment tester un site sur iPhone.
- L’émulateur d’Android Studio fait tourner Android avec Chrome sous Windows, macOS ou Linux. Voir comment tester un site sur Android.
Les deux sont gratuits, lourds à télécharger et mettent quelques minutes à démarrer. Ce sont les bons outils pour les bugs propres à un moteur, comme une mise en page qui ne casse que dans Safari.
Méthode 4 : demander directement le site mobile
Certains sites anciens ont encore un site mobile séparé, à une adresse du type m.example.com. Saisir cette adresse dans un navigateur de bureau affiche souvent directement les pages mobiles. Les sites modernes fonctionnent rarement ainsi, et beaucoup redirigent les visiteurs desktop vers le domaine principal : c’est un raccourci pour certains sites plutôt qu’une méthode.
Quelle méthode choisir
| Objectif | Meilleure méthode | Pourquoi |
|---|---|---|
| Voir rapidement une page telle qu’elle apparaît sur un téléphone | Extension de vue mobile | Un clic, un vrai user agent mobile, reste active pendant la navigation |
| Déboguer le CSS ou le JavaScript d’une mise en page mobile | Mode appareil des DevTools | Les panneaux Elements, Console et Network sont à côté de l’aperçu |
| Vérifier un bug propre à Safari | Simulator de Xcode ou vrai iPhone | Seul WebKit montre les bugs de WebKit |
| Mesurer la vitesse mobile | Bridage des DevTools ou test de vitesse mobile | Le matériel de bureau masque les scripts lents |
| Vérifier les zones tactiles et les gestes | Un vrai téléphone | Les clics de souris ne reproduisent pas les pouces |
Ce qu’il faut regarder une fois la version mobile affichée
Ouvrir la vue mobile est la partie facile. La partie utile, c’est une courte checklist :
- Le texte se lit sans zoomer, et le texte courant fait au moins 16 px.
- Rien ne défile sur le côté. Une barre de défilement horizontale signale en général un élément à largeur fixe ou un tableau large.
- Le menu s’ouvre, se ferme et s’utilise avec le pouce.
- Les boutons et liens sont assez espacés pour être touchés.
- Les formulaires affichent le bon clavier et ne sont pas masqués par des barres fixes.
- Les images sont nettes sur les écrans haute densité sans être trop lourdes.
Pour une liste plus complète avant mise en ligne, utilisez la checklist de test de site mobile.
Questions fréquentes
Peut-on voir la version mobile d’un site dans Chrome sans extension ?
Oui. Ouvrez les DevTools et activez la barre d’appareils avec Ctrl + Shift + M (Cmd + Shift + M sur Mac). Une extension évite ces étapes et garde le réglage par onglet.
Dézoomer ou redimensionner la fenêtre affiche-t-il le site mobile ?
Redimensionner montre comment une mise en page responsive se réorganise à cette largeur. Aucun user agent mobile n’est envoyé : les sites qui détectent l’appareil serviront quand même leur version desktop.
La vue mobile sur ordinateur est-elle exactement ce qu’affiche un téléphone ?
Proche, mais pas identique. Les outils de bureau modifient la zone d’affichage et les signaux lus par le site. Ils ne changent ni le moteur de rendu, ni le processeur, ni la saisie tactile. Pour la vérification finale, ouvrez la page sur un vrai téléphone.