Simuler des appareils mobiles avec le mode Appareil

Sofia Emelianova
Sofia Emelianova

Utilisez le mode Appareil pour estimer l'apparence et les performances de votre page sur un appareil mobile.

Présentation

Le mode Appareil désigne un ensemble de fonctionnalités des outils pour les développeurs Chrome qui vous aident simuler des appareils mobiles. Voici certaines des fonctionnalités incluses :

Limites

Considérez le mode appareil comme une approximation de premier ordre de l'apparence de votre page sur un appareil mobile. Avec le mode Appareil, vous n'exécutez pas réellement votre code sur un appareil mobile. Vous simulez l'expérience utilisateur sur mobile depuis votre ordinateur portable ou de bureau.

Les outils de développement ne pourront jamais simuler certains aspects des appareils mobiles. Par exemple : l'architecture des CPU mobiles est très différente de celle des CPU d'ordinateur portable ou de bureau. En cas de doute, la meilleure solution consiste à afficher votre page sur un appareil mobile. Utilisez la télécommande Débogage : permet d'afficher, de modifier, de déboguer et de profiler le code d'une page à partir de votre ordinateur portable ou de bureau pendant qu'elle fonctionne réellement sur un appareil mobile.

Ouvrir la barre d'outils de l'appareil

Pour ouvrir la barre d'outils de l'appareil, procédez comme suit:

  1. Ouvrez les outils de développement.
  2. Cliquez sur Appareils Activer/Désactiver la barre d'outils des appareils située dans la barre d'action en haut de l'écran.

Bouton d'activation de la barre d'outils de l'appareil

Simuler une fenêtre d'affichage pour mobile

Par défaut, la barre d'outils de l'appareil s'ouvre dans la fenêtre d'affichage avec le paramètre Dimensions défini sur Responsive. Le menu déroulant Dimensions vous permet de simuler les dimensions d'un appareil mobile spécifique.

Barre d'outils de l'appareil.

Mode Fenêtre d'affichage responsive

Faites glisser les poignées pour redimensionner la fenêtre d'affichage aux dimensions de votre choix. Ou saisissez des valeurs spécifiques dans les champs de largeur et de hauteur. Dans cet exemple, la largeur est définie sur 480 et la hauteur sur 415

Poignées permettant de modifier les dimensions de la fenêtre d'affichage en mode Fenêtre d'affichage responsive.

Vous pouvez également utiliser la barre de préréglages de la largeur pour définir la largeur en cliquant sur l'une des options suivantes:

Barre des préréglages de la largeur

Mobile S Mobile M Mobile L Tablette Ordinateur portable Ordinateur portable L 4K
320px 375px 425px 768px 1024px 1440px 2560px

Afficher les requêtes média

Pour afficher les points d'arrêt des requêtes média au-dessus de la fenêtre d'affichage, cliquez sur Autres options Plus d'options > Afficher les requêtes média :

Afficher les requêtes média.

Les outils de développement affichent désormais deux barres supplémentaires au-dessus de la fenêtre d'affichage:

  • Barre bleue avec max-width points d'arrêt
  • Barre orange avec min-width points d'arrêt

Cliquez entre les points d'arrêt pour modifier la largeur de la fenêtre d'affichage afin que le point d'arrêt se déclenche.

Cliquez entre les points d'arrêt pour modifier la largeur de la fenêtre d'affichage.

Pour trouver la déclaration @media correspondante, effectuez un clic droit entre les points d'arrêt, puis sélectionnez Reveal in source code (Afficher dans le code source). Les outils de développement ouvrent le panneau Sources au niveau de la ligne correspondante dans l'éditeur.

Afficher dans le menu déroulant du code source.

Définir le rapport de pixels de l'appareil

Le rapport de pixels de l'appareil (DPR) correspond au ratio entre les pixels physiques sur l'écran matériel et les pixels logiques (CSS). En d'autres termes, elle indique à Chrome le nombre de pixels d'écran à utiliser pour dessiner un pixel CSS. Chrome utilise la valeur DPR lors du dessin sur des écrans HiDPI (High Dots Per Inch).

Pour définir une valeur de DPR:

  1. Cliquez sur Plus d'options Autres options > Ajouter le rapport de pixels de l'appareil

    Ajouter le rapport de pixels de l'appareil.

  2. Dans la barre d'action en haut de la fenêtre d'affichage, sélectionnez une valeur de DPR dans le nouveau menu déroulant DPR.

    Définir la valeur de DPR.

Définir le type d'appareil

Utilisez la liste Type d'appareil pour simuler un appareil mobile ou un ordinateur.

Liste des types d'appareils.

Si la liste ne s'affiche pas dans la barre d'action en haut de l'écran, sélectionnez Plus d'options Autres options > Ajoutez un type d'appareil.

Le tableau suivant décrit les différences entre ces options. La méthode d'affichage fait référence à si Chrome affiche la page comme une fenêtre d'affichage pour mobile ou ordinateur. L'icône de curseur désigne le type qui s'affiche lorsque vous passez la souris sur la page. Les événements déclenchés indiquent si la page se déclenche touch ou click lorsque vous interagissez avec la page.

OptionMéthode d'affichageIcône de curseurÉvénements déclenchés
MobileMobileCercletactile
Mobile (sans contact)MobileNormaleclic
OrdinateurOrdinateurNormaleclic
Ordinateur (tactile)OrdinateurCercletactile

Mode spécifique à l'appareil

Pour simuler les dimensions d'un appareil mobile spécifique, sélectionnez-le dans la liste Dimensions.

Liste "Dimensions"

Pour en savoir plus, consultez Ajouter un appareil mobile personnalisé.

Faire pivoter la fenêtre d'affichage en mode paysage

Cliquez sur screen_rotation Faire pivoter pour faire pivoter la fenêtre d'affichage en mode paysage.

Orientation paysage.

Notez que le bouton Faire pivoter Effectuer une rotation disparaît si la barre d'outils de l'appareil est étroite.

Barre d'outils de l'appareil.

Consultez également la section Définir l'orientation.

Activer/Désactiver le mode Dual Screen

Certains appareils, comme le Surface Duo, proposent deux écrans et deux façons de les utiliser: avec un écran actif ou les deux.

Pour basculer entre l'affichage double écran et le mode écran unique, cliquez sur devices_fold, puis sur Activer/Désactiver le mode double écran dans la barre d'outils.

Le mode Dual Screen est activé.

Définir la position de l'appareil

Certains appareils, comme l'Asus Zenbook Fold, sont équipés d'écrans pliables. Ces écrans ont une position: continu ou plié. La posture continue correspond à une position "plate" et plié forment un angle entre les sections de l'écran.

Pour définir la position de l'appareil, sélectionnez Continu ou Plié dans le menu déroulant correspondant de la barre d'outils.

Stratégie définie comme étant pliée.

Afficher le cadre de l'appareil

Pour simuler les dimensions d'un appareil mobile spécifique comme un Nest Hub, sélectionnez Plus d'options Autres options > Afficher le cadre de l'appareil pour afficher le cadre de l'appareil autour de la fenêtre d'affichage.

Afficher le cadre de l'appareil

Dans cet exemple, les outils de développement affichent le cadre de Nest Hub.

Cadre de l'appareil pour Nest Hub.

Ajouter un appareil mobile personnalisé

Pour ajouter un appareil personnalisé:

  1. Cliquez sur la liste Appareil, puis sélectionnez Modifier.

    Modifier.

  2. Dans Paramètres settings > Dans l'onglet Appareils, choisissez un appareil dans la liste des appareils compatibles ou cliquez sur Ajouter un appareil personnalisé pour ajouter le vôtre.

  3. Si vous ajoutez les vôtres, saisissez un nom, une largeur et une hauteur pour l'appareil, puis cliquez sur Ajouter.

    Créer un appareil personnalisé

    Les champs Ratio de pixels de l'appareil, Chaîne user-agent et Type d'appareil sont facultatifs. Le champ du type d'appareil correspond à la liste définie par défaut sur Mobile.

  4. De retour dans la fenêtre d'affichage, sélectionnez l'appareil que vous venez d'ajouter dans la liste Dimensions.

Afficher les règles

Cliquez sur Plus d'options Autres options > Afficher les règles pour voir les règles L'unité de taille des règles est le pixel.

Afficher les règles

Les outils de développement affichent des règles en haut et à gauche de la fenêtre d'affichage.

Règles au-dessus et à gauche de la fenêtre d'affichage

Cliquez sur les règles au niveau de marques spécifiques pour définir la largeur et la hauteur de la fenêtre d'affichage.

Zoomer dans la fenêtre d'affichage

La liste Zoom vous permet de faire un zoom avant ou arrière.

Zoomer.

Faire une capture d'écran

Pour faire une capture d'écran de ce que vous voyez dans la fenêtre d'affichage, cliquez sur Autres options Plus d'options > Faire une capture d'écran.

Option Capture d'écran dans le menu "Plus d'options".

Pour faire une capture d'écran de la page entière, y compris le contenu qui n'est pas visible dans la fenêtre d'affichage, sélectionnez Faire une capture d'écran en taille réelle dans le même menu.

Pour inclure un cadre d'appareil lors de la capture d'écran en mode spécifique à l'appareil, commencez par Afficher le cadre de l'appareil, puis cliquez sur Effectuer une capture d'écran comme indiqué précédemment.

Vous faites une capture d'écran avec un cadre d'appareil inclus.

Pour découvrir d'autres façons de réaliser des captures d'écran avec les outils de développement, consultez Quatre méthodes de capture d'écran avec les outils de développement.

Limiter le réseau et le processeur

Pour limiter à la fois le réseau et le processeur, sélectionnez Mobile de milieu de gamme ou Mobile de bas de gamme dans le menu Liste de limitations.

Liste des limitations.

Le mobile de milieu de gamme simule une connexion 3G rapide et limite la capacité du processeur, qui est donc quatre fois plus lent que normal. Le mobile d'entrée de gamme simule une connexion 3G lente et ralentit votre processeur 6 fois par rapport à la normale. Conserver n'oubliez pas que la limitation dépend de la capacité normale de votre ordinateur portable ou de bureau.

Notez que la liste des limitations est masquée si la barre d'outils de l'appareil est étroite.

Limiter uniquement le processeur

Pour limiter uniquement le processeur et non le réseau, accédez au panneau Performance, puis cliquez sur Capturer Settings Paramètres de capture., et Sélectionnez Ralentissement x4, Ralentissement x6 ou Ralentissement x20 dans la liste Processeurs.

Liste des processeurs.

Limiter uniquement le réseau

Pour limiter uniquement le réseau, et non le processeur, accédez au panneau Network (Réseau) et sélectionnez Fast 3G (3G rapide) ou 3G lente dans la liste Limitation.

Liste des limitations.

Vous pouvez également appuyer sur Commande+Maj+P (Mac) ou Ctrl+Maj+P (Windows, Linux, ChromeOS) pour ouvrir la Dans le menu, saisissez 3G, puis sélectionnez Activer la limitation 3G rapide ou Activer la limitation 3G lente.

Menu de commandes

Vous pouvez également définir la limitation de bande passante réseau à partir du panneau Performances. Cliquez sur Paramètres de capture. Paramètres de capture., puis sélectionnez Fast 3G ou Slow 3G dans la liste Réseau.

Définir la limitation de la bande passante réseau à partir du panneau "Performances"

Émuler les capteurs

Utilisez le panneau Capteurs pour ignorer la géolocalisation, simuler l'orientation de l'appareil, forcer l'appui et émuler l'état inactif.

Les sections suivantes expliquent rapidement comment remplacer la géolocalisation et définir l'orientation de l'appareil. Pour obtenir la liste complète des fonctionnalités, consultez Émuler les capteurs de l'appareil.

Ignorer la géolocalisation

Pour ouvrir l'interface utilisateur de remplacement de la géolocalisation, cliquez sur Customize and control DevTools (Personnaliser et contrôler les outils de développement). Personnaliser et contrôler les outils de développement, puis sélectionnez Plus d'outils > Capteurs :

Capteurs

Vous pouvez également appuyer sur Commande+Maj+P (Mac) ou Ctrl+Maj+P (Windows, Linux, ChromeOS) pour ouvrir la Menu, saisissez Sensors, puis sélectionnez Afficher les capteurs.

Afficher les capteurs

Sélectionnez l'un des préréglages dans la liste Zone ou sélectionnez Autre pour indiquer votre vos coordonnées, ou sélectionnez Position non disponible pour tester le comportement de votre page lorsque la géolocalisation est en état d'erreur.

Géolocalisation

Définir l'orientation

Pour ouvrir l'interface utilisateur d'orientation, cliquez sur Customize and control DevTools (Personnaliser et contrôler les outils de développement). Personnaliser et contrôler les outils de développement, puis sélectionnez Plus d'outils > Capteurs :

Capteurs

Vous pouvez également appuyer sur Commande+Maj+P (Mac) ou Ctrl+Maj+P (Windows, Linux, ChromeOS) pour ouvrir la Menu, saisissez Sensors, puis sélectionnez Afficher les capteurs.

Afficher les capteurs

Sélectionnez l'un des préréglages dans la liste Orientation ou sélectionnez Orientation personnalisée pour définir ses propres valeurs alpha, bêta et gamma.

Orientation