Comment afficher la version mobile dun site Web sur un PC

Si vous êtes un développeur Web ou possédez une entreprise en ligne, vous pourriez être curieux de savoir à quoi ressemble un site mobile sur un ordinateur. L'apparence et la fonctionnalité de votre site mobile peuvent être cruciales, car plus de la moitié du trafic Internet provient des téléphones. Les clients sont plus susceptibles de rester plus longtemps sur un site ou d'acheter quelque chose s'il est visuellement attrayant. Une vue de bureau peut également vous aider à apporter des modifications et à résoudre les problèmes plus rapidement.

Comment afficher la version mobile d'un site Web sur un PC

Heureusement, il s'agit d'un processus relativement simple. Dans cet article, nous allons vous montrer comment afficher la version mobile d'un site Web sur différents appareils et navigateurs.

1. Afficher la version mobile sur Google Chrome

1.1 Sur Mac

  1. Lancez le navigateur Google Chrome et accédez au site que vous souhaitez consulter.
    Site Web sur Chrome Mac
  2. Appuyez sur F12 sur votre clavier pour accéder à DevTools.
    DevTools
  3. Cliquez sur l'icône "Toggle Device Emulation".
    Toggle Device Emulation
  4. Choisissez parmi une liste d'appareils iOS et Android pour les émuler.
    Choisir l'appareil
  5. Le site sera affiché sous la forme mobile que vous avez choisie.
    Vue mobile du site

1.2 Sur Windows

  1. Ouvrez le navigateur Chrome.
    Ouvrir Chrome
  2. Accédez au site Web souhaité.
  3. Cliquez droit sur la page et sélectionnez "Inspecter".
    Inspecter
  4. Cliquez sur "Plus d'outils" puis sur "Outils de développement".
    Outils de développement
  5. Cliquez sur l'icône de basculement de l'appareil.
    Basculement appareil
  6. Choisissez un appareil mobile à émuler.
    Choisir appareil mobile
  7. Ajustez les dimensions si nécessaire.

1.3 Sur Chromebook

  1. Ouvrez Google Chrome.
    Ouvrir Chrome sur Chromebook
  2. Accédez à la page Web désirée.
    Accéder à la page Web
  3. Cliquez sur l'icône des trois points pour accéder au menu.
    Icône menu
  4. Sélectionnez "Outils de développement".
    Outils de développement
  5. Basculez vers le mode d'affichage du site mobile.
    Basculez vers mobile

2. Afficher la version mobile sur Firefox

2.1 Sur Mac

  1. Ouvrez la version mobile souhaitée du site Web.
  2. Cliquez droit et sélectionnez "Inspecter".
    Inspecter sur Firefox Mac
  3. Sélectionnez "Mode de conception réactif".
    Mode de conception réactif
  4. Choisissez la taille de l'écran.
    Choisir taille

2.2 Sur Windows

  1. Démarrez Firefox.
    Démarrer Firefox
  2. Accédez au site souhaité.
    Accéder au site Firefox
  3. Cliquez sur l'icône à trois barres pour les paramètres.
    Icône paramètres Firefox
  4. Sélectionnez "Développeur Web".
    Développeur Web
  5. Sélectionnez "Mode de conception réactif".
    Choix mode réactif
  6. Choisissez un modèle de smartphone.
    Choisir smartphone

3. Afficher la version mobile dans Safari sur Mac

  1. Lancez le navigateur Safari.
    Lancer Safari
  2. Accédez au site souhaité.
    Accéder à site sur Safari
  3. Cliquez sur "Options" puis "Développer".
    Menu options Safari
  4. Choisissez "Entrer en mode de conception réactive".
    Mode de conception réactive Safari
  5. Vous pouvez maintenant consulter la version mobile du site Web.
    Vue mobile sur Safari

FAQ supplémentaire

Puis-je afficher la version de bureau d'un site Web sur mon téléphone ?

Oui, il est possible de passer de la version mobile à la version de bureau sans utiliser d'ordinateur. Pour cela, suivez ces étapes :

  1. Accédez au site que vous souhaitez voir en mode bureau.
  2. Appuyez sur l'icône à trois points pour accéder au menu.
  3. Sélectionnez "Affichage du bureau".

Faciliter la conception de sites Web mobiles

Les outils de développement sont parfaits pour analyser et modifier une version mobile d'un site Web sur un ordinateur sans changer d'appareil. Vous pouvez modifier la taille de l'écran pour observer le fonctionnement des composants et ajuster différents éléments pour créer un site Web adapté à plusieurs tailles d'écran.

Lors de la conception d'un site Web, il est essentiel de garder à l'esprit l'apparence du front-end sur divers appareils. L'utilisation des méthodes décrites peut également aider à identifier et résoudre les problèmes liés aux composants d'un site Web.

Avez-vous déjà essayé d'afficher une version mobile d'un site sur votre bureau ? Quel navigateur préférez-vous utiliser pour cela ? Faites-nous savoir dans la section commentaires ci-dessous.

27 Comments

  1. Hương Đà Nẵng -

    Génial ! Ça me fait gagner un temps fou dans mes projets. À partager avec mes collègues, c'est sûr

  2. Minh Kha -

    J'adore ! Je viens d'essayer cette méthode et tout fonctionne bien. Ça va m'aider dans ma création de site.

  3. Trang Nguyễn -

    Une fois que vous comprenez comment faire, c'est assez fun ! Merci pour cette explication claire.

  4. Phương QN -

    Merci pour ce tuto, vous avez rendu quelque chose de compliqué en quelque chose de simple. Génial

  5. Nam Trần -

    Vous m'avez sauvé la vie ! Enfin moyen de rendre mes designs responsifs. Bravo

  6. Oanh Tùng -

    Vous avez réussi à répondre à une préoccupation que j'avais depuis longtemps. Merci milles fois !

  7. Như Quỳnh -

    Est-ce que ça fonctionne avec les nouvelles mises à jour des navigateurs ? Je veux être sûr avant de l'essayer

  8. Vân Anh -

    J'ai une expérience à partager ! En suivant ces étapes, j'ai pu détecter des bugs sur la version mobile de mon site

  9. Nguyễn Hoài -

    Ça fonctionne parfaitement pour moi ! Je suis vraiment heureux de trouver cette solution

  10. Võ Thi -

    Je me sens enfin équipé pour aborder les tests mobiles. Merci pour la clarté de l'article

  11. Mèo con -

    C'est marrant, j'ai toujours voulu savoir ça. Bravo pour l'explication claire

  12. Duy Sinh 6789 -

    J'ai essayé la méthode, et ça a fonctionné du premier coup ! Merci beaucoup

  13. Thùy Linh -

    Merci pour cet article ! J'ai enfin compris comment afficher la version mobile d'un site Web sur mon PC. C'est vraiment pratique pour tester mes designs

  14. Quang vn -

    Est-ce que quelqu'un sait si ça fonctionne sur Safari ? Je veux tester ça sur mon Mac

  15. Mai Huy -

    À part Chrome, quelles autres options avez-vous pour afficher la version mobile

  16. Hạnh Thảo -

    Est-ce que quelqu'un utilise Firefox pour ça ? Je me demande si c'est aussi efficace.

  17. Thế Vinh -

    Honnêtement, même si je suis un novice en informatique, je n'ai eu aucun mal à suivre cette méthode. Merci encore !

  18. Lan Pham -

    Pour ceux qui ont des doutes, c’est très simple. Une fois que vous connaissez le bon outil, vous n'aurez plus de problèmes

  19. Huyền Lizzie -

    Pour ceux qui cherchent une solution rapide, utilisez Chrome avec l'outil de développement. Ça rend la vie tellement plus facile !

  20. Duy Huy -

    Quelle bonne idée d'aborder ce sujet ! Avec l'importance croissante des mobiles, c'est essentiel d'être au courant

  21. Hà Sơn -

    Super méthode ! C'est fou comme c'est facile une fois que vous le savez. Continuez avec ce bon travail

  22. Thương Lê -

    J'apprécie beaucoup ce genre de contenu, merci de le partager ! Cela va beaucoup m'aider dans ma carrière.

  23. Hoàng Kim -

    J’ai une question : est-ce que ce procédé modifie les paramètres de mon site ? Je ne veux pas risquer de tout casser

  24. Ngọc Bích -

    Quand j'ai lu ça, je pensais que c'était plus compliqué. Merci d’avoir rendu ça aussi simple.

  25. Nguyễn Thành -

    Je suis tellement content d'avoir trouvé cet article. Testez-le si vous ne l'avez pas encore fait

  26. Linh mèo -

    Super info ! J'étais un peu perdu avant de le lire. Est-ce que ça marche sur tous les navigateurs

  27. Phúc IT -

    Article très utile, merci ! J'utilise souvent cette technique pour optimiser mes sites pour le mobile avant de les lancer.

Leave a Comment

Comment résoudre le problème de fonctionnement du mode sans échec de Windows 11 (F8)

Comment résoudre le problème de fonctionnement du mode sans échec de Windows 11 (F8)

Vous rencontrez des difficultés avec le mode sans échec de Windows 11 ? Découvrez des solutions éprouvées (touche F8), des conseils de dépannage et des astuces simples pour redémarrer votre PC sans problème. Aucune compétence technique requise !

Résolution du problème daffichage du compteur FPS de la barre de jeu en 2026

Résolution du problème daffichage du compteur FPS de la barre de jeu en 2026

Vous rencontrez des difficultés avec l'affichage du compteur FPS dans la barre de jeu en 2026 ? Découvrez des solutions éprouvées pour un fonctionnement optimal de votre affichage FPS sous Windows. Guide pas à pas pour les joueurs.

Comment résoudre les micro-saccades dans les jeux sous Windows 11

Comment résoudre les micro-saccades dans les jeux sous Windows 11

Vous rencontrez des problèmes de micro-saccades dans vos jeux sous Windows 11 ? Découvrez des solutions éprouvées pour éliminer les ralentissements, optimiser les performances et profiter d’une expérience de jeu fluide. Des solutions étape par étape pour une expérience sans saccades.

Comment corriger lerreur 0x80070005 sous Windows 11

Comment corriger lerreur 0x80070005 sous Windows 11

Vous rencontrez l'erreur 0x80070005 sous Windows 11 ? Découvrez des solutions éprouvées et détaillées pour résoudre les problèmes d'accès refusé, les problèmes de mise à jour et bien plus encore. Optimisez le fonctionnement de votre PC dès aujourd'hui !

Comment corriger lerreur de gestion de la mémoire sous Windows 11

Comment corriger lerreur de gestion de la mémoire sous Windows 11

Vous rencontrez des difficultés avec l'erreur frustrante de gestion de la mémoire sous Windows 11 ? Découvrez des solutions éprouvées et détaillées pour la résoudre rapidement et retrouver un PC performant. Ce guide a été mis à jour avec les dernières astuces pour optimiser les performances de votre ordinateur.

Résolution des problèmes liés à labsence du pilote Precision sous Windows 11

Résolution des problèmes liés à labsence du pilote Precision sous Windows 11

Vous rencontrez des difficultés avec le pilote de précision manquant sous Windows 11 ? Découvrez des solutions éprouvées pour restaurer la précision de votre pavé tactile, optimiser les performances et assurer le bon fonctionnement de votre appareil. Guide pas à pas inclus.

Comment résoudre le problème du mode Performances de Windows 11 Ultimate

Comment résoudre le problème du mode Performances de Windows 11 Ultimate

Vous rencontrez des problèmes de performances avec Windows 11 ? Découvrez des solutions étape par étape pour optimiser votre PC grâce au Plan de performances ultimes.

Résolution du problème de mise à léchelle du texte dans Cmd.exe sous Windows 11

Résolution du problème de mise à léchelle du texte dans Cmd.exe sous Windows 11

Vous rencontrez des problèmes d'affichage avec du texte flou ou trop grand dans l'invite de commandes Windows 11 ? Découvrez des solutions éprouvées à ce problème de mise à l'échelle du texte, notamment des instructions étape par étape, des modifications du registre et des conseils sur le mode de compatibilité pour retrouver un affichage net et lisible dans votre invite de commandes.

Résolution du problème daffichage des effets acryliques et mica sous Windows 11

Résolution du problème daffichage des effets acryliques et mica sous Windows 11

Vous rencontrez des difficultés avec l'affichage des effets acryliques et mica sous Windows 11 ? Découvrez des solutions éprouvées pour restaurer ces superbes fonctionnalités visuelles et améliorer votre expérience utilisateur en toute simplicité.

Comment corriger les erreurs audio aptX et LDAC sous Windows 11

Comment corriger les erreurs audio aptX et LDAC sous Windows 11

Vous rencontrez des problèmes audio avec aptX et LDAC sous Windows 11 ? Ce guide expert vous propose des solutions rapides et fiables pour retrouver un son Bluetooth de haute qualité sur votre PC. Dites adieu aux coupures audio !

Comment résoudre le problème de son étouffé du microphone interne sous Windows 11

Comment résoudre le problème de son étouffé du microphone interne sous Windows 11

Vous rencontrez des problèmes de son étouffé avec votre micro interne sous Windows 11 ? Découvrez des solutions éprouvées et faciles à suivre pour retrouver une qualité audio optimale. Aucune compétence technique n'est requise : votre micro fonctionnera parfaitement dès aujourd'hui !

Dépannage des problèmes de latence dans les jeux VBS et HVCI sous Windows 11

Dépannage des problèmes de latence dans les jeux VBS et HVCI sous Windows 11

Vous rencontrez des problèmes de latence dans vos jeux sous Windows 11 à cause de VBS et HVCI ? Ce guide complet explique ce que sont ces technologies, pourquoi elles provoquent des saccades et propose une solution pas à pas pour améliorer votre nombre d'images par seconde (FPS) sans compromettre votre sécurité. Retrouvez une expérience de jeu fluide dès aujourd'hui !

Dépannage du menu Démarrer de Windows 11 - Section recommandée

Dépannage du menu Démarrer de Windows 11 - Section recommandée

Vous rencontrez des difficultés avec la section « Recommandé » du menu Démarrer de Windows 11 ? Découvrez des solutions éprouvées pour corriger les dysfonctionnements, les applications manquantes et les problèmes de performance. Retrouvez rapidement un menu Démarrer fonctionnel.

Résolution des problèmes liés à labsence du lecteur NAS dans lExplorateur Windows 11

Résolution des problèmes liés à labsence du lecteur NAS dans lExplorateur Windows 11

Votre NAS sous Windows 11 n'apparaît pas dans l'Explorateur ? Suivez ce guide de dépannage étape par étape pour reconnecter facilement votre stockage réseau et retrouver un accès fluide à vos fichiers. Solutions éprouvées pour les problèmes courants tels que les erreurs de mappage et les problèmes de connexion.

Comment corriger lerreur du catalogue Windows Update sous Windows 11

Comment corriger lerreur du catalogue Windows Update sous Windows 11

Vous rencontrez des difficultés avec l'erreur du catalogue Windows Update sous Windows 11 ? Découvrez des solutions éprouvées et détaillées pour rétablir le bon fonctionnement de vos mises à jour. Dites adieu aux frustrations et bonjour à une expérience PC optimale !