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

Windows 11 est sur le point dajouter une section de conseils de configuration système

Windows 11 est sur le point dajouter une section de conseils de configuration système

Les derniers aperçus de Windows 11 publiés par Microsoft cette semaine incluent une section À propos améliorée dans l'application Paramètres, où les utilisateurs peuvent obtenir plus d'informations sur le matériel à l'intérieur de leur ordinateur.

Windows 11 permet désormais aux utilisateurs de taper facilement avec une manette Xbox

Windows 11 permet désormais aux utilisateurs de taper facilement avec une manette Xbox

Pour résoudre les problèmes courants rencontrés par les joueurs sur PC, Microsoft a enfin rendu le système d'exploitation Windows plus facile à naviguer avec une manette Xbox.

AMD exige officiellement Windows 11 pour ses dernières cartes graphiques

AMD exige officiellement Windows 11 pour ses dernières cartes graphiques

Dans son nouveau document de support UEFI, AMD indique que les GPU Radeon à partir de la série 9000 ne prendront officiellement en charge que le mode UEFI.

Comment mettre à jour les pilotes graphiques sous Windows 10 et 11

Comment mettre à jour les pilotes graphiques sous Windows 10 et 11

La mise à jour du pilote de votre carte graphique vers la dernière version peut aider à résoudre les problèmes de résolution d'écran, de jeux et de performances graphiques globales de votre ordinateur.

Découvrez la nature de lUAC dans Windows et comment utiliser ce paramètre pour contrôler les autorisations des utilisateurs Windows.

Découvrez la nature de lUAC dans Windows et comment utiliser ce paramètre pour contrôler les autorisations des utilisateurs Windows.

Dans l'article suivant, Quantrimang.com entrera dans les détails spécifiques de ce qu'est l'UAC, de son fonctionnement et des avantages de l'activation de cette fonctionnalité dans n'importe quelle version de Windows.

Conseils utiles pour ne jamais manquer despace de stockage Windows

Conseils utiles pour ne jamais manquer despace de stockage Windows

Les notifications constantes concernant un espace de stockage faible vous rendront fou. Alors commencez à mettre en œuvre des habitudes intelligentes pour vous assurer de ne jamais manquer d’espace de stockage !

Activer GodMode sur Windows 10, 8 et 7

Activer GodMode sur Windows 10, 8 et 7

GodeMode s'appelle Raccourci du Panneau de configuration principal de Windows. GodMode (ou God Mode) est un panneau de contrôle qui vous permet de définir et d'accéder à tout sur votre système d'exploitation Windows.

Comment désactiver les notifications de demande de localisation sur Windows 11

Comment désactiver les notifications de demande de localisation sur Windows 11

À partir de Windows 11 build 25977, Microsoft a ajouté une option permettant de désactiver les notifications de demande de localisation pour vous aider à gérer les applications ayant accès à la localisation.

Les mises à jour de Windows 11 créent silencieusement un dossier mystérieux sur le lecteur C

Les mises à jour de Windows 11 créent silencieusement un dossier mystérieux sur le lecteur C

Les mises à jour de sécurité d’avril pour Windows 11 ont créé silencieusement un nouveau dossier vide sur le lecteur C.

Comment supprimer licône « En savoir plus sur cette image » sous Windows 11

Comment supprimer licône « En savoir plus sur cette image » sous Windows 11

Le fond d’écran Spotlight sur le bureau et l’écran de verrouillage de Windows 11 comporte une icône ennuyeuse « En savoir plus sur cette image ». Voici les instructions pour supprimer l’icône « En savoir plus sur cette image » de Windows 11.

9 façons douvrir loutil Applications et fonctionnalités sur Windows 11

9 façons douvrir loutil Applications et fonctionnalités sur Windows 11

Le panneau de configuration Applications et fonctionnalités est l'équivalent des paramètres de l'outil Programmes et fonctionnalités du Panneau de configuration.

Comment afficher le dossier Bibliothèques sous Windows 11

Comment afficher le dossier Bibliothèques sous Windows 11

Le dossier Bibliothèques de Windows 11 est masqué dans l'interface de l'Explorateur de fichiers, mais vous pouvez facilement l'afficher à nouveau en quelques clics.

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.