Cette page décrit la Vue Adaptative telle qu'elle apparait avant Firefox 52. Il est également possible d'avoir cette version de l'outil si le support multiprocessus (e10s) est désactivé. Pour l'article décrivant la version ultérieure à Firefox 52, voir Vue Adaptative.
Un responsive design est un design qui s'adapte à différentes tailles d'écrans, afin que la présentation soit optimale sur tous les types d'appareils utilisés, tels que les smartphones ou les tablettes. Le mode « vue adaptative » permet de voir facilement le rendu de votre design sur des écrans de tailles différentes.
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.
La vue adaptative est utile, car elle permet de changer rapidement la taille de cette zone de contenu.
Bien sûr, vous pourriez simplement redimensionner la fenêtre du navigateur. Mais cela peut être gênant, car tous les onglets sont alors redimensionnés. Et cela peut rendre l'interface du navigateur bien plus dure à utiliser.
Quand la vue adaptative est activée, vous pouvez continuer à naviguer normalement dans la zone de contenu redimensionnée.
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.
- Sur le clavier, appuyer sur Ctrl+Maj+M pour Windows ou Linux, ou Cmd+Option+M pour OS X.
Pour désactiver la vue adaptative :
- Sélectionner à nouveau Vue adaptative dans le menu de Firefox.
- Cliquer sur le bouton de fermeture en haut à gauche de la fenêtre.
- Sur le clavier, appuyer à nouveau sur Ctrl+Maj+M, ou sur Échap.
Redimensionnement
Vous pouvez redimensionner la zone de contenu de deux façons différentes :
- en utilisant le contrôle "Sélectionner la taille
- en cliquant-glissant les contrôles situés à droite et en bas, ou celui dans le coin en bas à droite.
Si vous redimensionnez en utilisant le cliquer-glisser, vous pouvez maintenir la touche CTRL (cmd sous Mac) enfoncée pour ralentir la vitesse de redimensionnement afin d'être plus précis.
