52 votes

Flimm avatar

Comment puis-je ouvrir rapidement une vue mobile d'une page dans un navigateur de bureau ?

Demandé el 6 de Février, 2018
Quand la question a-t-elle été
32261 affichage
Nombre de visites la question a
5 Réponses
Nombre de réponses aux questions
Résolu
Situation réelle de la question

Puisque nous sommes dans un monde où le mobile est roi, il devient de plus en plus important de pouvoir tester facilement les sites web sur les téléphones mobiles, ou sur des téléphones mobiles émulés. Je collabore avec des personnes qui travaillent sur des sites web et des offres de médias sociaux, et j'aimerais les encourager à ouvrir régulièrement les sites web de leur navigateur de bureau en vue mobile. Je pense en particulier à la fonction intégrée de "vue mobile" du navigateur, qui est souvent cachée parmi tous les autres outils de développement fournis par le navigateur, mais je suis prêt à envisager tout ce qui est aussi rapide à mettre en place.

Comment ouvrir une vue mobile d'un site web à partir d'un navigateur de bureau ?

Demandé el 6 de Février, 2018 par Flimm

Réponses

Trop de publicités?

94voto

Flimm avatar
Flimm Points 9047

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 Responsive Design".

Chrome :

Vous devez d'abord ouvrir "Developer Tools" :

  • Sous Windows/Linux, appuyez sur Ctrl + Shift + I ou simplement F12
  • Dans macOS, appuyez sur option + command + I

Une fois les outils de développement ouverts et concentrés, vous pouvez ouvrir la barre d'outils de l'appareil :

  • Sous Windows/Linux, appuyez sur Ctrl + Shift + M
  • Dans macOS, appuyez sur command + shift + M

Vous pouvez également trouver cet élément de menu en ouvrant les outils de développement ("More Tools", "Develepor Tools"), puis en cliquant sur l'icône qui ressemble à un téléphone portable devant un tableau "Toggle device toolbar" (basculer la barre d'outils de l'appareil).

Safari :

Il semble qu'Apple ait désactivé par défaut le raccourci clavier permettant d'accéder au mode responsive design. Vous pouvez suivre ce tutoriel sur la configuration d'un raccourci clavier pour l'utiliser .

Vous pouvez trouver cet élément de menu en cliquant sur "Develop", "Enter Responsive Design Mode". Si vous ne voyez pas l'élément de menu "Développer", vous devez l'activer en ouvrant "Préférences", "Avancées", et en cochant "Afficher le menu Développer dans la barre de menu".

Bord :

  • Presse F12 pour ouvrir les outils de développement, puis Ctrl + 7 pour ouvrir l'onglet "Emulation". Configurez l'appareil 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".

Répondu el 6 de Février, 2018 par Flimm (9047 Points )

12voto

Shobhit Garg avatar
Shobhit Garg Points 121

Réponse de Flimm est correct à 100 %. Au cas où la mémorisation des raccourcis serait est trop compliqué, il y a ce bouton bleu dans les outils du développeur qui permet de basculer entre la vue web et la vue mobile/tablette :

chrome

Ou avec Firefox :

firefox

Après avoir activé la barre d'outils de l'appareil, vous pouvez choisir la marque et le modèle de l'appareil que vous souhaitez utiliser. que vous souhaitez émuler dans le menu déroulant.

Répondu el 6 de Février, 2018 par Shobhit Garg (121 Points )

2voto

23nigam avatar
23nigam Points 121

Pour les tests, j'utilise les sites web suivants :-

  1. http://www.jamus.co.uk/demos/rwd-demonstrations/
  2. http://mattkersley.com/responsive/

Les deux sites susmentionnés me permettent d'afficher mon application web dans plusieurs largeurs d'appareils.

Répondu el 7 de Février, 2018 par 23nigam (121 Points )

1voto

Alex Dupuy avatar
Alex Dupuy Points 2253

Ajoutez une extension "user agent switcher" dans votre navigateur et spécifiez un user agent mobile. Si le site web est intelligent suffisamment, il vous proposera une version optimisée pour le mobile.

Je ne recommanderai aucune extension spécifique. L'idéal serait d'intégrer des préréglages pour les navigateurs mobiles et de pouvoir activer ou désactiver le changement d'agent utilisateur pour chaque site web.

Répondu el 7 de Février, 2018 par Alex Dupuy (2253 Points )

1voto

thisismydesign avatar
thisismydesign Points 111

Vous pouvez définir l'agent utilisateur et la taille de la fenêtre à partir de la ligne de commande ou de la configuration de lancement d'un raccourci.

Par exemple :

& "C:\Program Files\Google\Chrome\Application\chrome.exe" --new-window --window-size=375,812 --user-agent="Mozilla/5.0 (Linux; Android 8.0; Pixel 2 Build/OPD3.170816.012) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.67 Mobile Safari/537.36" --user-data-dir=C:\workspace\tmp\chrome https://google.com

En --user-data drapeau est obligatoire pour que cela fonctionne . Créez un dossier à cet effet.

Répondu el 15 de Décembre, 2020 par thisismydesign (111 Points )

Questions en vedette

Top Tags

Dans notre réseau

SistemesEz.com

SystemesEZ est une communauté de sysadmins où vous pouvez résoudre vos problèmes et vos doutes. Vous pouvez consulter les questions des autres sysadmins, poser vos propres questions ou résoudre celles des autres.

Powered by:

Yandex
X