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.

Sign up and earn $1000 a day ⋙

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 changer le format de devise dans Windows 11

Comment changer le format de devise dans Windows 11

Ce guide vous montrera comment modifier le format de devise utilisé pour votre compte dans Windows 10 et Windows 11.

Instructions pour linstallation de .NET Framework 3.5 sur Windows 10

Instructions pour linstallation de .NET Framework 3.5 sur Windows 10

Ce guide vous montrera différentes manières d’installer .NET Framework 3.5 en ligne et hors ligne dans Windows 10.

Voici comment supprimer la partition de récupération et la partition de récupération de 450 Mo sous Windows 10

Voici comment supprimer la partition de récupération et la partition de récupération de 450 Mo sous Windows 10

La partition de récupération est une partition distincte sur le disque dur ou le SSD de votre ordinateur et est utilisée pour restaurer ou réinstaller le système d'exploitation en cas de panne du système.

Comment utiliser efficacement plusieurs écrans dordinateur en même temps

Comment utiliser efficacement plusieurs écrans dordinateur en même temps

Les configurations à deux écrans sont de plus en plus courantes de nos jours. Le multitâche sur un seul écran est trop restrictif.

Les méthodes et personnalisations de cet article vous aideront à accélérer votre Windows 10 comme le vent.

Les méthodes et personnalisations de cet article vous aideront à accélérer votre Windows 10 comme le vent.

Vous souhaitez accélérer Windows 10, améliorer sa vitesse ou accélérer son démarrage ? Cet article vous présente toutes les solutions pour accélérer Windows 10. Lisez-les et appliquez-les pour accélérer votre ordinateur Windows 10 !

Ces alternatives sûres au Wi-Fi public aident à protéger vos données

Ces alternatives sûres au Wi-Fi public aident à protéger vos données

Que vous travailliez dans un café ou que vous consultiez vos e-mails à l'aéroport, ces alternatives plus sécurisées protégeront vos données sans sacrifier votre connexion.

Instructions pour modifier la taille des icônes dans la barre des tâches de Windows 11

Instructions pour modifier la taille des icônes dans la barre des tâches de Windows 11

Les utilisateurs peuvent ajuster et modifier la taille des icônes de la barre des tâches pour qu'elles soient plus petites ou plus grandes, en fonction des besoins de chacun.

Comment corriger lerreur de recherche Windows 10 : impossible de rechercher, ne fonctionne pas

Comment corriger lerreur de recherche Windows 10 : impossible de rechercher, ne fonctionne pas

Lorsque l’outil de recherche sur Windows 10 échoue, les utilisateurs ne peuvent pas rechercher les programmes ou les données dont ils ont besoin.

Comment activer la recherche de fichiers de stockage cloud sur Windows 11

Comment activer la recherche de fichiers de stockage cloud sur Windows 11

La recherche sur Windows 11 extrait les résultats non seulement des fichiers et des applications sur votre ordinateur, mais également du stockage cloud lié à votre compte Microsoft.

Comment changer le mot de passe Wi-Fi, changer le mot de passe Wi-Fi VNPT, FPT, Tenda, TP-Link, Viettel sur ordinateur, téléphone

Comment changer le mot de passe Wi-Fi, changer le mot de passe Wi-Fi VNPT, FPT, Tenda, TP-Link, Viettel sur ordinateur, téléphone

Changer votre mot de passe Wi-Fi en caractères spéciaux et complexes est une façon de protéger le Wi-Fi de votre famille contre toute utilisation illégale, affectant ainsi la vitesse du Wi-Fi de votre famille.

Comment ouvrir le Panneau de configuration sous Windows 11

Comment ouvrir le Panneau de configuration sous Windows 11

Le Panneau de configuration joue toujours un rôle essentiel dans de nombreuses tâches de configuration nécessaires sur votre nouveau système d'exploitation. Voici quelques façons d'y accéder sous Windows 11.

Correction de lerreur empêchant linstallation de .NET Framework 3.5 sous Windows

Correction de lerreur empêchant linstallation de .NET Framework 3.5 sous Windows

.NET Framework de Microsoft est une plateforme de programmation qui comprend des bibliothèques de programmation pouvant être installées ou déjà incluses dans les systèmes d'exploitation Windows. Dans certains cas, votre ordinateur ne peut pas installer ce logiciel. Suivez donc la solution décrite dans l'article ci-dessous.

3 outils dont vous avez besoin pour supprimer le suivi de Windows 11

3 outils dont vous avez besoin pour supprimer le suivi de Windows 11

Ne vous fiez pas entièrement aux paramètres par défaut en matière de confidentialité. Windows 11 ne fait pas exception, car il dépasse souvent ses limites en matière de collecte de données.

Comment télécharger Windows 10, télécharger le fichier ISO Windows 10 depuis Microsoft

Comment télécharger Windows 10, télécharger le fichier ISO Windows 10 depuis Microsoft

Lorsque vous téléchargez Windows 10 depuis Microsoft, vous téléchargez Windows 10 sous forme de fichier ISO. Ce fichier ISO vous permet de créer une clé USB bootable, une clé USB d'installation Windows ou un ordinateur fantôme. Voyons comment télécharger Windows 10 !

Comment réinitialiser la connexion Ethernet sous Windows 11

Comment réinitialiser la connexion Ethernet sous Windows 11

Un moyen rapide de résoudre les problèmes de réseau filaire les plus courants est de réinitialiser votre connexion Ethernet. Voici les étapes pour réinitialiser votre connexion Ethernet sous Windows 11.