Comment simuler des appareils mobiles avec le mode appareil dans Chrome

Comment simuler des appareils mobiles avec le mode appareil dans Chrome

L’essai de site Web est devenu un nombre croissant de complexes. L’époque de la vérification de la capacité dans plusieurs navigateurs est révolue depuis longtemps. Votre chef-d’œuvre branché doit être rigoureusement évalué sur une variété d’appareils cellulaires, de pilules et de bureau avec différents systèmes d’exploitation, résolutions d’écran et capacités. Dans les cas intenses, cela peut prendre aussi longtemps que l’amélioration d’origine.

La procédure est complexe de la même manière à l’aide d’écrans tactiles, d’appareils hybrides et d’écrans haute densité. Si vous codez sur un PC ordinaire avec une souris et un clavier, il est difficile de comprendre comment votre chef-d’œuvre fonctionnera. Les fonctionnalités associées au survol de la souris ne seront pas toujours des peintures et votre application pourrait ne pas fonctionner. Mais comment pouvez-vous vérifier votre appareil pendant le développement et éviter de courir et de basculer entre plusieurs gadgets?

Heureusement, tous les navigateurs modernes offrent des outils d’émulation mobile et l’un d’entre eux se trouve dans Chrome. Il peut aider à prendre conscience des premiers problèmes sans quitter le confort de votre PC et l’environnement d’amélioration.

Outils de développement

Démarrez Chrome, accédez à la page Web que vous souhaitez vérifier et ouvrez les outils de développement (Menu> Outils> Outils de développement : Cmd + Opt + I sur MAC ou F12 / Ctrl + Shift + I sur WINDOWS et LINUX).

Vous pouvez désormais activer l’émulateur de navigateur en cliquant sur l’icône de la barre d’outils Basculer en haut à gauche:

Une simulation d’appareil va maintenant apparaître

Les dimensions de l’affichage émulé peuvent être modifiées lorsque Responsive est choisi comme type d’outil.

Émulation tactile activée

Déplacez votre souris sur l’outil pour regarder un curseur circulaire “tactile”. Cela réagira aux occasions entièrement JavaScript basées sur le toucher, notamment le démarrage, le déplacement. Les occasions particulières à la souris et les conséquences CSS ne devraient plus se produire.

Maintenez la touche Maj enfoncée, puis cliquez et déplacez votre souris pour émuler le zoom par pincement.

Cela vaut la peine de passer un peu de temps à vous familiariser avec la barre d’outils et le menu au-dessus de l’émulateur mobile:

Les contrôles par défaut

  • le type d’appareil (ou en réalité réactif)
  • la résolution actuelle
  • l’échelle (l’écran d’affichage peut être zoomé ou dézoomé pour mieux s’adapter au volet de l’émulateur)
  • un bouton bascule portrait / panorama (en supposant qu’un outil autre que Responsive est sélectionné)
  • Le menu à trois points vous permet d’afficher ou de masquer des contrôles supplémentaires:
  • le corps de l’outil (si disponible, un graphique du téléphone ou de la pilule)
  • une règle de pixel
  • le ratio de pixels de l’outil (qui comprend 2.zéro pour les écrans Retina émulés)
  • le type d’appareil (une classe qui inclut «cellule» ou «tablette»)
  • limitation du réseau (un moyen de limiter la bande passante et de tester les performances globales sur des connexions plus lentes)
  • l’option ultime vous permet de capturer une capture d’écran qui intègre le cadre de l’outil s’il est affiché.

Barres de requête des médias CSS

La barre sous la barre d’outils affiche une variété de tailles de téléphone, de tablette et d’outils typiques. Vous pouvez cliquer dessus pendant que Responsive est sélectionné comme outil pour définir cette largeur.

Sélectionnez Afficher les requêtes multimédias dans le menu à trois points pour afficher une représentation graphique à code couleur de toutes les requêtes multimédias définies dans le CSS.

  • BLEU – requêtes qui visent une largeur maximale
  • VERT – recherche la largeur des objectifs dans une plage
  • ORANGE – requêtes qui ciblent une largeur minimale

Vous pouvez cliquer sur n’importe quelle barre pour régler l’écran de l’émulateur sur cette largeur.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Résoudre : *
22 ⁄ 11 =