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 éventuels plus rapidement.
Heureusement, il s’agit d’un processus relativement simple. Dans cet article, nous allons vous montrer comment afficher une version mobile d’un site Web sur différents appareils et navigateurs.
Comment afficher la version mobile d’un site Web dans Chrome sur un Mac
Dans Chrome, vous pouvez tester le frontal et voir si tous les composants du site Web fonctionnent correctement à l’aide d’un outil de développement intégré appelé DevTools. Parce qu’il fournit des choix d’appareils prédéfinis, DevTools est le meilleur moyen pour le développeur de déplacer rapidement la vue du bureau vers le mobile et vice versa sans aucune extension de développeur.
Vous pouvez également modifier la taille de l’écran en fonction de vos besoins et ajuster la largeur et la hauteur de l’écran pour voir à quoi ressemblera votre site Web sur différentes tailles d’écran. Pour ce faire sur un Mac, suivez ces étapes :
- Lancez le navigateur Google Chrome et accédez au site que vous souhaitez consulter.
- Appuyez sur F12 sur votre clavier pour accéder à DevTools.
- Lorsque le mode est activé, cliquez sur l’icône « Toggle Device Emulation ».
- Vous pouvez choisir parmi une liste d’appareils iOS et Android pour les émuler.
- Il affichera le site Web sous la forme mobile que vous avez choisie.
Lorsque vous avez terminé, fermez simplement la fenêtre des outils de développement pour fermer la version mobile du site Web.
Comment afficher la version mobile d’un site Web dans Chrome sur un PC Windows
Si vous souhaitez afficher une version mobile d’un site Web sur un PC Windows dans Chrome, le processus est assez similaire :
- Ouvrez le navigateur Chrome.
- Dans Chrome, accédez au site Web que vous souhaitez voir dans la version mobile.
- Faites un clic droit sur la page Web et sélectionnez « Inspecter » dans le menu.
- Pour accéder aux outils de développement, cliquez sur l’onglet « Plus d’outils » et sélectionnez « Outils de développement » ou appuyez sur F12 pour ouvrir DevTools.
- La fenêtre Outils de développement s’ouvrira.
- Cliquez sur l’icône de basculement de l’appareil pour basculer vers le mode d’affichage du site mobile.
- Choisissez l’appareil mobile que vous souhaitez émuler (facultatif).
- Vous pouvez maintenant modifier les dimensions de l’écran selon vos besoins.
Comment afficher la version mobile d’un site Web dans Chrome sur un Chromebook
L’accès à la version mobile d’un site Web dans Chrome à l’aide d’un Chromebook est très similaire aux deux premières méthodes.
- Ouvrez le navigateur Web Google Chrome.
- Ouvrez la page Web à laquelle vous souhaitez accéder sur votre appareil mobile.
- Pour accéder au menu, cliquez sur l’icône des trois points verticaux.
- Faites glisser votre souris sur l’élément Plus d’outils dans la liste.
- Sélectionnez « Outils de développement ».
- La fenêtre Outils de développement du navigateur s’ouvrira.
- Basculez le mode d’affichage du site mobile en cliquant sur l’icône de basculement de l’appareil.
Cela fera apparaître l’interface utilisateur du site mobile. Vous pouvez également choisir l’expérience d’appareil préférée en sélectionnant la marque et le modèle dans la liste déroulante. La page Web s’actualisera en tant que site de bureau chaque fois que vous fermerez la console des outils de développement.
Comment afficher la version mobile d’un site Web dans Firefox sur un Mac
Vous pouvez utiliser d’autres navigateurs Web comme Firefox pour afficher un site mobile sur un bureau Mac. Le redimensionnement de la fenêtre du navigateur est l’une des méthodes que la plupart des développeurs Web utilisent pour évaluer le site Web de conception réactive. Cependant, la plupart du temps, cette alternative ne paraîtra pas acceptable.
C’est là que les capacités de développement Web du navigateur Firefox sont utiles. Vous pouvez parcourir vos pages Web dans plusieurs résolutions si vous savez comment accéder aux versions mobiles des sites Web dans Firefox. Suivez ces étapes:
- Ouvrez la version mobile du site Web que vous souhaitez voir.
- Faites un clic droit sur la page Web et sélectionnez l’option « Inspecter » dans le menu.
- Choisissez le « mode de conception réactif ».
- Choisissez la taille de l’écran du site Web.
Comment afficher la version mobile d’un site Web dans Firefox sur un PC Windows
Les PC Windows ont également la possibilité d’afficher les versions mobiles des sites Web à l’aide de Firefox. Voici comment procéder :
- Démarrez Firefox sur votre PC.
- Accédez au site Web que vous souhaitez voir en version mobile.
- Allez dans « Paramètres » en cliquant sur l’icône horizontale à trois barres.
- Vous verrez un menu déroulant dans lequel vous devrez choisir une option « Développeur Web ».
- Sélectionnez « Mode de conception réactif ».
- Enfin, vous pouvez sélectionner un modèle de smartphone pour voir comment votre site apparaîtra sur cet appareil.
Comment afficher la version mobile d’un site Web dans Safari sur un Mac
Nous avons expliqué comment afficher un site Web mobile sur un ordinateur de bureau à l’aide de Chrome et de Firefox. Mais qu’en est-il du navigateur par défaut fourni avec les appareils Mac, Safari ? Heureusement, il est également possible d’afficher une version mobile d’un site Web dans Safari.
- Lancez le navigateur Safari.
- Accédez au site Web que vous souhaitez afficher en version mobile.
- Cliquez sur « Options » puis sur le menu « Développer ».
- Dans le menu déroulant, choisissez « Entrez en mode de conception réactive ».
- Vous pouvez maintenant consulter la version mobile du site Web.
FAQ supplémentaire
Puis-je afficher la version de bureau d’un site Web sur mon téléphone ?
La réponse est oui! Vous pouvez passer de la version mobile à la version de bureau pour le vérifier sans utiliser d’ordinateur. Les étapes pour passer de la version mobile à la version de bureau dans Chrome sont les suivantes :
1. Accédez au site Web que vous souhaitez voir en mode bureau.
2. Appuyez sur l’icône à trois points pour accéder au menu.
3. Sélectionnez l’option « Affichage du bureau » maintenant.
N’oubliez pas que ces étapes peuvent varier en fonction du téléphone que vous utilisez.
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 de bureau sans changer d’appareil. Vous pouvez modifier la taille de l’écran pour observer le fonctionnement des composants sur divers appareils. Vous pouvez ajuster différents composants et créer le site Web pour plusieurs tailles d’écran en utilisant le mode réactif.
Lors de la conception d’un site Web, le concepteur doit toujours garder à l’esprit la façon dont le front-end du site apparaît sur les téléphones, les tablettes et les ordinateurs de bureau. L’utilisation des méthodes décrites dans l’article peut également aider le développeur à le faire et également à identifier les composants d’un site Web qui créent des problèmes pour les résoudre.
Avez-vous déjà essayé d’afficher une version mobile d’un site sur votre bureau ? Quel navigateur préférez-vous utiliser pour le faire ? Faites-nous savoir dans la section commentaires ci-dessous.
