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 configurer la reconnaissance vocale sous Windows

Comment configurer la reconnaissance vocale sous Windows

Suivez ces étapes pour configurer la reconnaissance vocale sur votre ordinateur portable ou PC Windows.

Restaurer les dossiers cachés dans Windows en cas dinfection par un virus

Restaurer les dossiers cachés dans Windows en cas dinfection par un virus

Dans de nombreux cas, c'est généralement à cause d'attaques de virus que les dossiers cachés du système ne peuvent pas être affichés même après avoir activé l'option « Afficher les fichiers et dossiers cachés » dans les Options des dossiers. Certaines des méthodes suivantes aideront à résoudre ce problème.

3 façons de désactiver le pare-feu de Windows 10

3 façons de désactiver le pare-feu de Windows 10

Parfois, vous devez encore désactiver le pare-feu pour exécuter certaines fonctions. Les 3 façons de désactiver le pare-feu Win 10 ci-dessous vous aideront dans de telles situations.

Comment ajouter un raccourci darrêt sur le bureau dans Windows 11

Comment ajouter un raccourci darrêt sur le bureau dans Windows 11

Si vous recherchez une méthode plus rapide, voici comment ajouter un raccourci d'arrêt dédié à votre bureau ou à votre barre des tâches Windows 11.

Instructions pour corriger lerreur dimpossibilité dépingler des applications à la barre des tâches de Windows 11

Instructions pour corriger lerreur dimpossibilité dépingler des applications à la barre des tâches de Windows 11

Lors du processus d'épinglage d'applications, nous rencontrons parfois des erreurs telles que l'impossibilité d'épingler l'application à la barre des tâches. Vous trouverez ci-dessous quelques moyens de corriger l’erreur consistant à ne pas pouvoir épingler des applications dans la barre des tâches de Windows 11.

Dois-je utiliser Windows BitLocker pour crypter mon disque dur ?

Dois-je utiliser Windows BitLocker pour crypter mon disque dur ?

Windows BitLocker fournit une solution facile à utiliser pour crypter votre disque dur. Cependant, cela présente également des inconvénients et peut ne pas être un bon choix pour tout le monde.

Comment écraser les données supprimées sur un lecteur sous Windows 11/10

Comment écraser les données supprimées sur un lecteur sous Windows 11/10

Ce guide vous montrera comment écraser (effacer en toute sécurité) les données supprimées sur un lecteur afin qu'elles ne puissent pas être récupérées ou consultées dans Windows 10 et Windows 11.

Conseils pour ajouter Copilot au menu contextuel de Windows 11

Conseils pour ajouter Copilot au menu contextuel de Windows 11

Si vous utilisez régulièrement Copilot sur Windows 11, il existe un moyen très simple d'accéder rapidement à Copilot, qui consiste à ajouter Copilot au menu contextuel.

Comment ajouter une imprimante à Windows 10

Comment ajouter une imprimante à Windows 10

L'ajout d'une imprimante à Windows 10 est simple, bien que le processus pour les appareils filaires soit différent de celui pour les appareils sans fil.

Ce script PowerShell peut contourner la configuration système requise de Windows 11, compte Microsoft

Ce script PowerShell peut contourner la configuration système requise de Windows 11, compte Microsoft

Un nouvel utilitaire est en cours de développement qui aidera à supprimer les exigences système strictes de Windows 11.

10 erreurs importantes à éviter lors de la maintenance de votre ordinateur

10 erreurs importantes à éviter lors de la maintenance de votre ordinateur

La maintenance du PC est essentielle pour un fonctionnement à long terme et de bonnes performances. Cependant, vous pouvez toujours commettre des erreurs qui peuvent faire plus de mal que de bien à votre PC.

Cách bật tính năng bảo vệ Smart App Control Windows 11

Cách bật tính năng bảo vệ Smart App Control Windows 11

Smart App Control (SAC) là tính năng bảo mật có trong ứng dụng Windows Security giúp khóa hệ thống, chỉ cho phép chạy các ứng dụng đáng tin cậy.

Comment configurer les paramètres TCP/IP sous Windows

Comment configurer les paramètres TCP/IP sous Windows

Votre ordinateur a besoin d'un moyen de communiquer avec d'autres appareils, et c'est là que TCP/IP peut vous aider. TCP/IP garantit que les données circulent en douceur sur le réseau, que vous naviguiez sur le Web ou que vous partagiez des fichiers.

Fichiers qui gaspillent de lespace sur votre PC sans que vous vous en rendiez compte

Fichiers qui gaspillent de lespace sur votre PC sans que vous vous en rendiez compte

Les fichiers non compressés peuvent occuper silencieusement des gigaoctets d’espace sur votre PC Windows, ralentissant ainsi les choses et encombrant votre disque sans même que vous vous en rendiez compte.

10 façons de résoudre le problème de loption Bluetooth manquante dans Windows 11

10 façons de résoudre le problème de loption Bluetooth manquante dans Windows 11

L'option Bluetooth a disparu sur votre ordinateur Windows 111 ? Cela peut se produire pour plusieurs raisons, notamment des problèmes temporaires, des pilotes Bluetooth corrompus et des problèmes avec le système d'exploitation Windows.