1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
|
---
title: Vue adaptative
slug: Tools/Responsive_Design_Mode
tags:
- Firefox
- Mobile
- Responsive Design
- Tools
- Web Development
translation_of: Tools/Responsive_Design_Mode
original_slug: Outils/Vue_adaptative
---
<div>{{ToolsSidebar}}</div>
<p>Le <a href="/fr/Apps/Progressive/Responsive">responsive design</a> (vue adaptative) est la pratique de concevoir un site web afin que celui-ci s'affiche correctement sur un grand nombre d'appareils différents. En particulier les mobiles et les tablettes, ainsi que les ordinateurs (portable ou de bureau).</p>
<p>Le facteur le plus évident ici est la taille d'écran, mais il y a aussi d'autres facteurs, incluant la densité de pixels de l'affichage ainsi que s’il est tactile ou non. Le mode vue adaptative vous donne un moyen simple de simuler ces facteurs, de tester à quoi ressembler votre site web et comment il se comportera sur différents appareils.</p>
<h2 id="Activation_et_désactivation_du_mode_de_vue_adaptative">Activation et désactivation du mode de vue adaptative</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 macOS).</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>:<img alt="" src="https://mdn.mozillademos.org/files/16318/RDM_button.png" style="display: block; height: 664px; margin-left: auto; margin-right: auto; width: 852px;"></li>
<li>Utiliser le raccourci clavier <strong>Ctrl+Maj+M</strong>, ou <strong>Cmd+Option+M</strong> pour macOS.</li>
</ul>
<h2 id="Utiliser_la_vue_adaptative">Utiliser la vue adaptative</h2>
<p>Lorsque 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.</p>
<div class="note">
<p><strong>Note:</strong> L'appareil sélectioné ainsi que l'orientation (portrait/paysage) sera sauvegardé entre deux sessions.</p>
</div>
<p> </p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16319/RDM.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 852px;"></p>
<p> </p>
<p>Il est possible d'afficher ou de cacher la boîte à outils indépendamment de la vue adaptative elle-même :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/16320/RDMdevtools.png" style="display: block; height: 799px; margin-left: auto; margin-right: auto; width: 852px;">Quand la vue adaptative est activée, il est possible de continuer à naviguer comme vous le feriez normalement dans la zone de contenu redimensionnée.</p>
<h2 id="Sélectionner_un_appareil">Sélectionner un appareil</h2>
<p>Juste au-dessus de la zone d'affichage, se trouve la ligne "Aucun appareil sélectionné". Cliquer sur cette ligne ouvrira une liste de noms d'appareils. Sélectionner un appareil, et le mode de vue adaptative configurera les propriétés suivantes correspondantes à l'appareil sélectionné :</p>
<ul>
<li>Taille de l'écran</li>
<li>Ratio de pixel de l'appareil (le ratio de pixels physiques de l'appareil sur les pixels indépendants de l'appareil)</li>
<li>Simulation des évènements tactiles</li>
</ul>
<p>En plus, Firefox modifiera l'en-tête HTTP <a href="/fr/docs/Web/HTTP/Headers/User-Agent">User-Agent</a> 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é <code><a href="/fr/docs/Web/API/NavigatorID/userAgent">navigator.userAgent</a></code> aura la même valeur.</p>
<p>{{EmbedYouTube("JNAyKemudv0")}}</p>
<p>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 : <span class="im"><a href="https://github.com/mozilla/simulated-devices">https://github.com/mozilla/simulated-devices.</a></span></p>
<h3 id="Sauvegarder_des_appareils_personnalisés">Sauvegarder des appareils personnalisés</h3>
<p>Depuis de Firefox 54, il est possible de sauvegarder des appareils personnalisés. Chaque appareil peut avoir ses propres propriétés de :</p>
<ul>
<li>taille</li>
<li>devicePixelRatio (DPR)</li>
<li>user agent (UA)</li>
<li>support tactile</li>
</ul>
<p>Il est également possible de prévisualiser les propriétés des appareils existants en survolant leur nom dans le menu des appareils.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14797/RDM%20Custom%20Device.gif" style="display: block; height: 800px; margin: 0px auto; width: 800px;"></p>
<h2 id="Contrôler_les_appareils">Contrôler les appareils</h2>
<p>Il est possible de fournir des valeurs personnalisées pour la plupart des propriétés d'un appareil.</p>
<h3 id="Modifier_la_taille_d'écran">Modifier la taille d'écran</h3>
<p>Pour modifier la taille d'écran, il faut cliquer sur les valeurs en dessous de la zone d'affichage et les modifier :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14939/rdm-set-size-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>
<p>Il est également possible de déplacer le coin en bas à droite de la zone d'affichage.</p>
<p>Depuis Firefox 59, il est possible d'éditer les tailles d'écran avec le clavier. Lorsque les dimensions sont sélectionnées (ou que le curseur d'écriture est dedans). Il est également possible d'utiliser les flèches haut et bas de 1px.</p>
<p>Pour changer les dimensions plus rapidement, il est possible d'utiliser maj pour itérer de 10pixels en 10 pixels.</p>
<h3 id="Modifier_le_ratio_pixel_de_l'appareil">Modifier le ratio pixel de l'appareil</h3>
<p>Pour définir un ratio personnalisé, il faut cliquer sur la boite "DPR" et sélectionner la valeur voulue.<img alt="" src="https://mdn.mozillademos.org/files/14941/rdm-set-dpr-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>
<h3 id="Activerdésactiver_la_simulation_du_touch">Activer/désactiver la simulation du touch</h3>
<p>Pour ce faire, il faut cliquer sur l'icône en forme de doigt :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14935/rdm-toggle-touch-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;">Lorsque la simulation est activée, les évènements de la souris sont transformés en évènements <a href="/fr/docs/Web/Guide/API/DOM/Events/Touch_events">évènements touch</a>.</p>
<h3 id="Contrôler_le_comportement_de_rechargement_de_page">Contrôler le comportement de rechargement de page</h3>
<p>Depuis Firefox 60 le menu de sélection <em>Actualiser quand... </em>a été rajouté :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15841/reload-behavior-controls.png" style="display: block; margin: 0 auto;"></p>
<p>Cliquer dessus affiche deux options qui sont toutes deux désactivées par défaut :</p>
<ul>
<li>Actualiser lors de l'activation/désactivation de la simulation tactile.</li>
<li>Actualiser lors du changement d'agent utilisateur.</li>
</ul>
<p>Avant Firefox 60, ces actualisations étaient automatiques, car certains comportements de la page n'étaient pas fonctionnels sinon. Par exemple, certaines pages vérifient la compatibilité tactile au chargement, et n'ajoute des évènements que si tel est le cas.</p>
<p>Cependant, si vous n'êtes pas intéressé par de telles fonctionnalités (par exemple si vous avez juste envie de vérifier la mise en page dans différentes résolutions), ces rechargements peuvent s'avérer ennuyants. Il est donc utile de pouvoir contrôler ces rechargements.</p>
<p>Lors d'un changement de certaines options, un message d'avertissement est affiché pour vous prévenir que les rechargements ne sont plus automatiques, et précise comment réactiver ce comportement :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15840/page-reload-warning.png" style="display: block; margin: 0 auto;"></p>
<h3 id="Activerdésactiver_l'orientation">Activer/désactiver l'orientation</h3>
<p>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 :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14937/rdm-toggle-orientation-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>
<h2 id="Bridage_réseau">Bridage réseau</h2>
<p>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.</p>
<p>Les caractéristiques émulées sont :</p>
<ul>
<li>La vitesse de téléchargement</li>
<li>La vitesse d'upload (téléversement (berk))</li>
<li>latence minimum</li>
</ul>
<p>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.</p>
<table class="fullwidth-table standard-table">
<thead>
<tr>
<th scope="col">Sélection</th>
<th scope="col">Vitesse de téléchargement</th>
<th scope="col">Vitesse d'upload</th>
<th scope="col">Latence minimum (ms)</th>
</tr>
</thead>
<tbody>
<tr>
<td>GPRS</td>
<td>50 KB/s</td>
<td>20 KB/s</td>
<td>500</td>
</tr>
<tr>
<td>Regular 2G</td>
<td>250 KB/s</td>
<td>50 KB/s</td>
<td>300</td>
</tr>
<tr>
<td>Good 2G</td>
<td>450 KB/s</td>
<td>150 KB/s</td>
<td>150</td>
</tr>
<tr>
<td>Regular 3G</td>
<td>750 KB/s</td>
<td>250 KB/s</td>
<td>100</td>
</tr>
<tr>
<td>Good 3G</td>
<td>1.5 MB/s</td>
<td>750 KB/s</td>
<td>40</td>
</tr>
<tr>
<td>Regular 4G/LTE</td>
<td>4 MB/s</td>
<td>3 MB/s</td>
<td>20</td>
</tr>
<tr>
<td>DSL</td>
<td>2 MB/s</td>
<td>1 MB/s</td>
<td>5</td>
</tr>
<tr>
<td>Wi-Fi</td>
<td>30 MB/s</td>
<td>15 MB/s</td>
<td>2</td>
</tr>
</tbody>
</table>
<p>Pour sélectionner un réseau il faut cliquer sur la liste déroulante qui par défaut vaut "Aucune limitation" :<img alt="" src="https://mdn.mozillademos.org/files/14945/rdm-network-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;"></p>
<h2 id="Prendre_une_capture_d'écran">Prendre une capture d'écran</h2>
<p>Pour prendre une capture d'écran, il suffit de cliquer sur l'icône en forme d'appareil photo :</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14943/rdm-screenshot-2.png" style="display: block; height: 758px; margin-left: auto; margin-right: auto; width: 948px;">Les captures d'écran sont enregistrées à l'emplacement de téléchargement par défaut de Firefox.</p>
<p>Depuis Firefox 53, si la case "Enregistrer dans le presse-papier" est cochée dans la page des <a href="/fr/docs/Tools/Settings">paramètres</a> alors, la capture d'écran sera aussi enregistrée dans le presse-papier du système d'exploitation.</p>
|
