Comment ouvrir rapidement une vue mobile d'une page dans un navigateur de bureau?
Étant donné que nous sommes maintenant dans un monde où tout est sur mobile, il devient de plus en plus important de pouvoir facilement tester des sites Web sur des téléphones mobiles, ou sur des téléphones émulés. Je collabore avec des personnes qui travaillent sur des sites Web et des offres de médias sociaux et je les encourage à ouvrir régulièrement des sites Web à partir de leurs navigateurs de bureau dans une vue mobile. Je pense en particulier à la fonctionnalité intégrée "Vue mobile" du navigateur, qui est souvent cachée parmi tous les autres outils de développement fournis par un navigateur, mais je suis ravi de prendre en compte tout ce qui est aussi rapide à configurer.
Comment ouvrir une vue mobile d'un site Web à partir d'un navigateur de bureau?
Firefox:
- Sous Windows/Linux, appuyez sur Ctrl+Shift+M
- Dans macOS, appuyez sur option+command+M
Vous pouvez également trouver l'élément de menu sous ("Outils"), "Développeur Web", "Mode de conception sensible".
Chrome:
Vous devez d'abord ouvrir les "Outils de développement":
- Sous Windows/Linux, appuyez sur Ctrl+Shift+I ou juste F12
- Dans macOS, appuyez sur option+command+I
Une fois les outils de développement ouverts et ciblés, vous pouvez ouvrir la barre d’outils du périphérique:
- Sous Windows/Linux, appuyez sur Ctrl+Shift+M
- Dans macOS, appuyez sur command+shift+M
Vous pouvez également trouver l'élément de menu en ouvrant les outils de développement ("Autres outils", "Outils de développement"), puis en cliquant sur l'icône qui ressemble à un téléphone portable devant un tableau "Basculer la barre d'outils de périphérique".
Safari:
Il semblerait que Apple ait désactivé par défaut le raccourci clavier permettant de passer en mode de conception réactif. Vous pouvez suivre ce tutoriel sur la configuration d’un raccourci clavier .
Vous pouvez trouver l'élément de menu en cliquant sur "Développer", "Entrer en mode de conception réactif". Si vous ne voyez pas l'élément de menu "Développer", vous devez l'activer en ouvrant les "Préférences", "Avancé" et en cochant la case "Afficher le menu Développer dans la barre de menus".
Bord:
- Presse F12 pour ouvrir les outils de développement, puis Ctrl+7 pour ouvrir l'onglet "Emulation". Configurez le périphérique que vous souhaitez émuler.
Vous pouvez ouvrir les outils de développement à l'aide de la souris en cliquant avec le bouton droit de la souris sur la page Web et en choisissant "inspecter l'élément".
La réponse de Flimm est correcte à 100%. Au cas où vous auriez trop de difficultés à vous souvenir des raccourcis, c’est le bouton bleu des outils de développement qui permet de basculer entre l’affichage Web et l’affichage mobile/tablette:
Ou avec Firefox:
Après avoir activé la barre d'outils du périphérique, vous pouvez choisir la marque et le modèle du périphérique que vous souhaitez émuler dans le menu déroulant.
Pour les tests, j'utilise les sites Web suivants: -
Les deux sites ci-dessus me permettent de visualiser mon application Web dans plusieurs largeurs de périphérique.
Ajoutez une extension "user agent switcher" dans votre navigateur et spécifiez un agent utilisateur mobile. Si le site Web est intelligent suffisant, il vous servira une version optimisée pour les mobiles.
Je ne recommanderai aucune extension spécifique. L'idéal serait d'avoir des préréglages pour les navigateurs mobiles intégrés et la possibilité d'activer ou de désactiver le changement d'agent utilisateur site par site.
Les réponses ci-dessus conviennent parfaitement à ceux qui aiment s’en tenir à un seul navigateur ou qui disposent d’un "espace de travail" limité (par exemple, un seul moniteur de moins de 21 pouces avec une résolution basse).
Il existe en fait une solution encore plus intéressante que j'ai récemment découverte: https://blisk.io/
Je m'abstiendrai d'utiliser (en quelque sorte) le "lien d'affiliation" à des fins personnelles (il existe un "système basé sur des jetons" qui vous permet de gagner des crédits pour obtenir des éléments comme "espace nuage d'équipe" et "fonctionnalités premium" gratuits à utiliser avec ), mais Blisk est en fait assez élégant.
Ce "navigateur conçu pour le développement" basé sur Chromium offre une multitude de façons de faire une démonstration de la page dans divers appareils avec un "volet" vertical du côté GAUCHE, comme si vous voyiez les outils de développement Chrome par défaut dans la colonne verticale de droite.
C'est un coup d'oeil. Bien qu'il existe certaines limites à sa "fonctionnalité étendue freemium", cela fonctionne toujours très bien pour "prévisualiser" les versions PC et Mobile de vos pages/sites dans une comparaison côte à côte. Les fonctionnalités payantes semblent également très intéressantes si vous travaillez dans des équipes distantes (bien que je pense personnellement qu'il faille un meilleur programme de "test drive" avant de faire payer les utilisateurs au coût mensuel).
Divulgation complète: il existe une "limite de temps" EXTRÊMEMENT ennuyeuse par jour sur la partie de prévisualisation du mobile (bascule entre ouvert/fermé de l'icône à la droite de la barre d'adresse - changez la "prévisualisation de l'appareil" du plus petit lien vers le précédent). menu dans le coin supérieur droit "Afficher la liste des périphériques").
En outre: j'ai trouvé quelques astuces très utiles avec des extensions de navigateur, telles que les 2 différents "User-Agent Switcher" de Chrome/Firefox, qui vont un peu plus loin en vous permettant de basculer entre les chaînes d'agent d'utilisateur de navigateur de différents systèmes d'exploitation ET les navigateurs pour eux.
Je préfère la version "esolutions.se" en raison de la facilité avec laquelle il est possible d'ajouter des chaînes personnalisées d'agent utilisateur à la liste pour autant de personnalisations que vous le souhaitez (fonctionne également en mode hors connexion, ce qui peut être pratique dans certains cas): https://chrome.google.com/webstore/detail/user-agent-switcher/clddifkhljcojbojppdojfeeikdkgiae
Quoi qu'il en soit, c'est mes 2 cents. : P