---
title: Vue Adaptative (avant Firefox 52)
slug: conflicting/Tools/Responsive_Design_Mode
translation_of: Tools/Responsive_Design_Mode
translation_of_original: Tools/Responsive_Design_Mode_(before_Firefox_52)
original_slug: Outils/Responsive_Design_Mode_(before_Firefox_52)
---
<div>{{ToolsSidebar}}</div><div class="note">
<p>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  <a href="https://support.mozilla.org/t5/Manage-preferences-and-add-ons/Enable-multiprocess-support/ta-p/1371917">support multiprocessus (e10s)</a> est désactivé. Pour l'article décrivant la version ultérieure à Firefox 52, voir <a href="/fr/docs/Tools/Responsive_Design_Mode">Vue Adaptative</a>.</p>
</div>

<p>Un<a href="/fr/docs/Développement_Web/Design_web_Responsive"> <em>responsive design</em></a> 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.</p>

<p>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.</p>

<p><img alt="" src="https://mdn.mozillademos.org/files/12738/responsive-design-mode.png" style="height: 788px; width: 735px;"></p>

<p>La vue adaptative est utile, car elle permet de changer rapidement la taille de cette zone de contenu.</p>

<p>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.</p>

<p>Quand la vue adaptative est activée, vous pouvez continuer à naviguer normalement dans la zone de contenu redimensionnée.</p>

<h2 id="Activation_et_désactivation">Activation et désactivation</h2>

<p>Il existe trois façons d’activer la vue adaptative :</p>

<ul>
 <li>Dans le <strong>menu de Firefox</strong>, sélectionner le sous-menu <strong>Développement</strong> puis <strong>Vue adaptative</strong> (ou le menu Outils si la barre de menus est affichée ou si vous êtes sur OS X).</li>
 <li>Appuyer sur le bouton <strong>Vue adaptative</strong> de la <a href="/fr/docs/Tools/Tools_Toolbox#Toolbar">barre d’outils de développement</a>.</li>
 <li>Sur le clavier, appuyer sur <strong>Ctrl+Maj+M</strong> pour Windows ou Linux, ou Cmd+Option+M pour OS X.</li>
</ul>

<p>Pour désactiver la vue adaptative :</p>

<ul>
 <li>Sélectionner à nouveau <strong>Vue adaptative</strong> dans le <strong>menu de Firefox</strong>.</li>
 <li>Cliquer sur le bouton de fermeture en haut à gauche de la fenêtre.</li>
 <li>Sur le clavier, appuyer à nouveau sur <strong>Ctrl+Maj+M</strong>, ou sur <strong>Échap.</strong></li>
</ul>

<h2 id="Redimensionnement">Redimensionnement</h2>

<p>Vous pouvez redimensionner la zone de contenu de deux façons différentes :</p>

<ul>
 <li>en utilisant le contrôle "<a href="/fr/docs/Outils/Vue_adaptative#select-size">Sélectionner la taille</a></li>
 <li>en cliquant-glissant les contrôles situés à droite et en bas, ou celui dans le coin en bas à droite.</li>
</ul>

<p>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.</p>

<p> </p>

<div style="overflow: hidden;">
<h2 id="Contrôles_de_la_vue_adaptative">Contrôles de la vue adaptative</h2>

<p><img alt="" src="https://mdn.mozillademos.org/files/12736/responsive-design-mode-controls.png" style="display: block; margin-left: auto; margin-right: auto;"></p>

<p>En haut de la page sur laquelle la vue adaptative est active se trouvent les six contrôles suivants :</p>

<dl>
 <dt>Fermer</dt>
 <dd>Fermer la vue adaptative et retourner à la navigation normale.</dd>
 <dt>Sélectionner la taille</dt>
 <dd>Sélectionner une résolution parmi des combinaisons de largeur x hauteur; ou définir sa propre résolution</dd>
 <dt>Orientation</dt>
 <dd>Alterner entre la vue portrait et paysage.</dd>
 <dt><strong>Simuler les événements tactiles</strong></dt>
 <dd>Activer/Désactiver la simulation des événements tactiles : quand cette option est active, les mouvements de la souris sont convertis en <a href="fr/docs/Web/Guide/API/DOM/Events/Touch_events">événements tactiles.</a></dd>
 <dt><strong>Capture d'écran</strong></dt>
 <dd>Prendre une capture d'écran de la zone de contenu. Les captures d'écrans seront sauvées dans le dossier de téléchargements de Firefox.</dd>
 <dt>Définir un User Agent personnalisé</dt>
 <dd><em>Nouveau dans Firefox 47</em>. Entrer une chaine de caractère User Agent et sortir de la boite. Alors la boite deviendra bleue pour signifier que la chaine est utilisée. Firefox inclura la chaine donnée dans les requêtes effectuées uniquement depuis cet onglet. C'est utile pour les sites qui affichent différents contenus en se basant sur le <a href="/fr/docs/Browser_detection_using_the_user_agent">UA sniffing</a>. Supprimer la chaine remet le comportement par défaut.</dd>
</dl>
</div>

<p> </p>