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

Quest-ce quun VPN ? Avantages et inconvénients dun réseau privé virtuel (VPN)

Quest-ce quun VPN ? Avantages et inconvénients dun réseau privé virtuel (VPN)

Qu'est-ce qu'un VPN ? Quels sont ses avantages et ses inconvénients ? Avec WebTech360, découvrons la définition d'un VPN et comment appliquer ce modèle et ce système au travail.

La plupart des gens n’utilisent pas ces fonctionnalités cachées dans la sécurité Windows.

La plupart des gens n’utilisent pas ces fonctionnalités cachées dans la sécurité Windows.

La sécurité Windows ne se limite pas à une simple protection contre les virus. Elle protège contre le phishing, bloque les rançongiciels et empêche l'exécution d'applications malveillantes. Cependant, ces fonctionnalités sont difficiles à repérer : elles sont dissimulées derrière des couches de menus.

Le codage n’est pas aussi difficile que vous le pensez

Le codage n’est pas aussi difficile que vous le pensez

Une fois que vous aurez appris et essayé par vous-même, vous constaterez que le cryptage est incroyablement facile à utiliser et incroyablement pratique pour la vie de tous les jours.

Récupérer des données supprimées avec Recuva Portable sous Windows 7

Récupérer des données supprimées avec Recuva Portable sous Windows 7

Dans l'article suivant, nous présenterons les opérations de base pour récupérer des données supprimées sous Windows 7 avec l'outil d'assistance Recuva Portable. Avec Recuva Portable, vous pouvez stocker vos données sur n'importe quelle clé USB et les utiliser à tout moment. Compact, simple et facile à utiliser, cet outil offre les fonctionnalités suivantes :

Comment supprimer les fichiers en double pour économiser la mémoire de lordinateur avec CCleaner

Comment supprimer les fichiers en double pour économiser la mémoire de lordinateur avec CCleaner

CCleaner recherche les fichiers en double en quelques minutes seulement, puis vous permet de décider lesquels peuvent être supprimés en toute sécurité.

Pourquoi changer l’emplacement de téléchargement par défaut dans Windows 11 ?

Pourquoi changer l’emplacement de téléchargement par défaut dans Windows 11 ?

Déplacer le dossier de téléchargement du lecteur C vers un autre lecteur sous Windows 11 vous aidera à réduire la capacité du lecteur C et aidera votre ordinateur à fonctionner plus facilement.

Comment arrêter les mises à jour Windows sur PC

Comment arrêter les mises à jour Windows sur PC

Il s’agit d’un moyen de renforcer et d’ajuster votre système afin que les mises à jour se produisent selon votre propre calendrier, et non celui de Microsoft.

Comment afficher les extensions de fichiers et les afficher sous Windows

Comment afficher les extensions de fichiers et les afficher sous Windows

L'Explorateur de fichiers Windows propose de nombreuses options pour modifier l'affichage des fichiers. Ce que vous ignorez peut-être, c'est qu'une option importante est désactivée par défaut, bien qu'elle soit cruciale pour la sécurité de votre système.

5 outils gratuits pour détecter les logiciels espions et publicitaires sur votre PC

5 outils gratuits pour détecter les logiciels espions et publicitaires sur votre PC

Avec les bons outils, vous pouvez analyser votre système et supprimer les logiciels espions, les logiciels publicitaires et autres programmes malveillants qui peuvent se cacher sur votre système.

14 applications et logiciels Windows dont vous avez besoin sur votre nouvel ordinateur

14 applications et logiciels Windows dont vous avez besoin sur votre nouvel ordinateur

Vous trouverez ci-dessous une liste de logiciels recommandés lors de l'installation d'un nouvel ordinateur, afin que vous puissiez choisir les applications les plus nécessaires et les meilleures sur votre ordinateur !

Comment cloner les paramètres Windows pour emporter votre flux de travail nimporte où

Comment cloner les paramètres Windows pour emporter votre flux de travail nimporte où

Conserver l'intégralité d'un système d'exploitation sur une clé USB peut s'avérer très utile, surtout si vous n'avez pas d'ordinateur portable. Mais ne pensez pas que cette fonctionnalité soit limitée aux distributions Linux ; il est temps d'essayer de cloner votre installation Windows.

Désactivez ces 7 services Windows pour prolonger la durée de vie de la batterie !

Désactivez ces 7 services Windows pour prolonger la durée de vie de la batterie !

La désactivation de certains de ces services peut vous faire économiser une quantité importante de batterie sans affecter votre utilisation quotidienne.

À quoi sert le raccourci Ctrl + Z sous Windows ? Probablement plus quon ne le pense.

À quoi sert le raccourci Ctrl + Z sous Windows ? Probablement plus quon ne le pense.

Ctrl + Z est une combinaison de touches extrêmement courante sous Windows. Elle permet d'annuler des actions dans tous les domaines de Windows.

Ne cliquez sur aucun lien raccourci tant que vous n’êtes pas sûr qu’il est sûr !

Ne cliquez sur aucun lien raccourci tant que vous n’êtes pas sûr qu’il est sûr !

Les URL raccourcies sont pratiques pour nettoyer les liens trop longs, mais elles masquent également la véritable destination. Pour éviter les logiciels malveillants ou le phishing, cliquer aveuglément sur ce lien n'est pas une bonne idée.

Windows 11 22H2 : Mise à jour Moment 1 avec de nombreuses fonctionnalités notables

Windows 11 22H2 : Mise à jour Moment 1 avec de nombreuses fonctionnalités notables

Après une longue attente, la première mise à jour majeure de Windows 11 est officiellement sortie.