Cette page décrit la Vue Adaptative telle qu'elle apparait après Firefox 52. Pour l'article décrivant la version antérieure à Firefox 52, voir :  Vue Adaptative (avant Firefox 52).

Le responsive design est une pratique de designer un site  afin que celui-ci s'affiche correctement sur un grand nombre d'apparreils différents. En particulier les smartphones et les tablettes, ainsi que les ordinateurs (portable ou non).

L'élément le plus important à prendre en compte et évidement la taille d'écran. Mais il y a d'autres facteurs qui entrent en jeu. Cela inclut la densité de pixels de l'écran ainsi que s’il est tactile ou non. Le mode « vue adaptative » permet de voir facilement le rendu de votre design sur des appareils différents.

La capture d’écran ci-dessous montre une page de la version mobile de Wikipédia, vue dans une zone de contenu de 320×480.

Activation et désactivation

Il existe trois façons d’activer la vue adaptative :

  • Dans le menu de Firefox, sélectionner le sous-menu Développement puis Vue adaptative (ou le menu Outils si la barre de menus est affichée ou si vous êtes sur OS X).
  • Appuyer sur le bouton Vue adaptative de la barre d’outils de développement:
  • Utiliser le raccourci clavier Ctrl+Maj+M pour Windows et Linux, ou Cmd+Option+M pour OS X.

Utiliser la Vue Adaptative

Lorsuque l'outil est activé, la zone de contenu des pages web prend la taille de l'écran de l'appareil sélectionné. Par défaut la taille est de 320 x 480 pixels:

Il est possible d'afficher ou de cacher la boit à outils indépendamment de la Vue Adaptative :

Quand la vue est activée, il est possible de continuer à naviguer normalement.

Sélectioner un appareil

Juste au-dessus de la zone d'affichage, une ligne "Aucun apparreil sélectioné". Cliquer sur cette ligne ouvrira une liste de noms d'appareils. Sélectionner un nom adaptera la vue adaptative à l'appareil. Les propriétés suivantes seront modifiées :

  • Taille de l'écran
  • Ratio pixel de l'appareil (le ratio de pixels physiques de l'appareil sur les pixels indépendants de l'appareil)
  • Simultaion des évènements touch

Additionally , Firefox modifiera l'en-tête HTTP User-Agent pour s'identifier en tant que navigateur par défaut. Par exemple si l'appareil sélection est un iPhone, alors Firefox s'identifiera comme Safari. La propriété navigator.userAgent aura la même valeur.

Les appareils listés ne sont qu'une partie de tous les appareils possibles. En bas de la liste, le bouton "Modifier la liste" ouvrira un panneau avec la liste complète de tous les appareils. Ce panneau permet de définir les appareils qui apparaitront dans la liste déroulante. La liste des appareils ainsi que leurs valeurs associées proviennent de : https://github.com/mozilla/simulated-devices.

Il est à noter qu'il n'est pas encore possible de définir ses propres appareils.

Controler les appareils

Il est possible de fournir des valeurs personnalisées pour la plupart des propriétés d'un appareil.

Modifier la taille d'écran

Pour modifier la taille d'écran, il faut cliquer sur les valeurs en dessous de la zone d'affichage et les modifier :

Il est également possible de déplacer le coin en bas à droite de la zone d'affichage.

Modifier le ratio pixel de l'appareil

Pour définir un ratio personnalisé, il faut cliquer sur la boite "DPR" et sélectionner la valeur voulue.

Activer/désactiver la simulation du touch

Pour ce faire, il faut cliquer sur l'icône en forme de doigt :

Lorsque la simulation est activée, les évènements de la souris sont transformés en évènements évènements touch.

Activer la simulation force la page à se rafraichir, car beaucoup de sites vérifie le support du touch seulement au chargement.

Activer/désactiver l'orientation

Pour alterner entre les orientations d'écran portrait et paysage, il suffit de cliquer sur l'icône à droite de la sélection d'appareils :

Bridage réseau

Si tout le développement est fait avec une bonne bande passante, il est possible d'avoir des problèmes avec une connexion moins rapide et de ne pas s'en rendre compte. La Vue Adaptative permet de dire au navigateur d'émuler (très approximativement) les caractéristiques de différents types de réseaux.

Les caractéristiques émulées sont :

  • La vitesse de téléchargement
  • La vitesse d'upload (téléversement (berk))
  • latence minimum

La table ci-dessous liste les valeurs associées à chaque type de réseau. Cependant, ne vous fiez pas à cela pour des mesures de performances exactes. Le but n'est d'avoir qu'une idée approximative de l’expérience utilisateur dans différentes conditions.

Sélection Vitesse de téléchargement Vitesse d'upload Latence minimum (ms)
GPRS 50 KB/s 20 KB/s 500
Regular 2G 250 KB/s 50 KB/s 300
Good 2G 450 KB/s 150 KB/s 150
Regular 3G 750 KB/s 250 KB/s 100
Good 3G 1.5 MB/s 750 KB/s 40
Regular 4G/LTE 4 MB/s 3 MB/s 20
DSL 2 MB/s 1 MB/s 5
Wi-Fi 30 MB/s 15 MB/s 2

Pour sélectioner un réseau il fuat cliquer sur la liste déroulante qui par défaut vaut "Aucune limitation" :

Prendre une capture d'écran

Pour prendre une capture d'écran, il suffit de cliquer sur l'icône en forme d'appareil photo :

Les captures d'écran sont enregistrées à l'emplacement de téléchargement par défaut de Firefox.

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : maximelore, trevorh, J.DMB, Nadra, Omnilaika02, wakka27, tregagnon, Goofy, Delapouite, mh_nichts
 Dernière mise à jour par : maximelore,