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: Modo de Desenho Adaptável
slug: Tools/Modo_de_Desenho_Adaptavel
tags:
- Desenho
- Desenho Adaptável
- Desenvolvimento de Web
- Ferramentas
- Ferramentas de Desenvolvimento
- Firefox
- Guía
- 'l10n:priority'
translation_of: Tools/Responsive_Design_Mode
---
<div>{{ToolsSidebar}}</div>
<p><a href="https://developer.mozilla.org/pt-PT/docs/Web/Apps/Progressiva">Desenho adaptável</a> is the practice of designing a website so it looks and works properly on a range of different devices — particularly mobile phones and tablets as well as desktops and laptops.</p>
<p>The most obvious factor here is screen size, but there are other factors as well, including the pixel density of the display and whether it supports touch. Responsive Design Mode gives you a simple way to simulate these factors, to test how your website will look and behave on different devices.</p>
<h2 id="Alternar_Modo_de_Desenho_Adaptável">Alternar Modo de Desenho Adaptável</h2>
<p>There are three ways to toggle Responsive Design Mode:</p>
<ul>
<li>From the Firefox menu: Select "Responsive Design Mode" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on macOS).</li>
<li>From the Developer Tools toolbox: Press the "Responsive Design Mode" button in the <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">Toolbox's toolbar</a>:<img alt="" src="https://mdn.mozillademos.org/files/14339/rdm-button.png" style="display: block; height: 746px; margin-left: auto; margin-right: auto; width: 948px;"></li>
<li>From the keyboard: Press Ctrl + Shift + M (or Cmd + Opt + M on macOS).</li>
</ul>
<h2 id="Utilizar_Modo_de_Desenho_Adaptável">Utilizar Modo de Desenho Adaptável</h2>
<p>With Responsive Design Mode enabled, the content area for web pages is set to the screen size for the particular device. Initially, it's set to 320 x 480 pixels.</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14947/rdm-open-2.png" style="display: block; height: 858px; margin-left: auto; margin-right: auto; width: 948px;"></p>
<p>You can show or hide the Developer Tools toolbox independently of toggling Responsive Design Mode itself:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/14933/rdm-toolbox-2.png" style="display: block; height: 752px; margin-left: auto; margin-right: auto; width: 948px;">While Responsive Design Mode is enabled, you can continue browsing as you normally would in the resized content area.</p>
<h2 id="Seleção_de_dispositivo">Seleção de dispositivo</h2>
<p>Just above the viewport you'll see a label "no device selected"; click this to see a list of device names. Select a device, and Responsive Design Mode will set the following properties to match the selected device:</p>
<ul>
<li>Screen size</li>
<li>Device pixel ratio (the ratio of device physical pixels to device-independent pixels)</li>
<li>Touch event simulation</li>
</ul>
<p>Additionally, Firefox will set the <a href="/en-US/docs/Web/HTTP/Headers/User-Agent">User-Agent</a> HTTP request header to identify itself as the default browser on the selected device. For example, if you've selected an iPhone, then Firefox will identify itself as Safari. The <code><a href="/en-US/docs/Web/API/NavigatorID/userAgent">navigator.userAgent</a></code> property will be set to the same value.</p>
<p>{{EmbedYouTube("JNAyKemudv0")}}</p>
<p>The devices listed in the drop-down are just a subset of the devices that can be selected. At the end of the drop-down, you'll see an item labeled "Edit list...". Select this to see a panel containing all the choices, which enables you to check the devices you want to see in the drop-down. The set of devices, and the values associated with each device, are taken from <span class="im"><a href="https://github.com/mozilla/simulated-devices">https://github.com/mozilla/simulated-devices.</a></span></p>
<h3 id="Guardar_dispositivos_personalizados">Guardar dispositivos personalizados</h3>
<p>Starting in Firefox 54, you can save custom devices in Responsive Design Mode. Each device can have its own:</p>
<ul>
<li>Size</li>
<li>DevicePixelRatio</li>
<li>User agent</li>
<li>Touch support</li>
</ul>
<p>Also, you can preview the properties of existing devices by hovering over the name in the device modal where they will display in a tooltip.</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="Controlos_de_dispositivo">Controlos de dispositivo</h2>
<p>You can also supply custom values for most device properties.</p>
<h3 id="Definir_tamanho_do_ecrã">Definir tamanho do ecrã</h3>
<p>To set screen size, click on the values under the viewport, and edit them:</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>You can also grab the bottom-left corner of the viewport and drag the viewport to the size you want.</p>
<p>And from Firefox 59 onward, you can now edit the screen size with the keyboard. When you are focused on (or your caret is within) either of the two dimension values, you can press or hold down the up and down cursor keys to increase or decrease the dimension value by 1 pixel each time.</p>
<p>If you want to change the dimensions more rapidly, you can hold down the Shift key, then press or hold down the up and down cursor keys to increase or decrease the dimension value by 10 pixels each time.</p>
<h3 id="Definir_proporção_do_píxel_do_dispositivo">Definir proporção do píxel do dispositivo</h3>
<p>To set a custom device pixel ratio, click the list box labeled "DPR" and select the value you want:</p>
<p><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="Alternar_simulação_do_evento_de_toque">Alternar simulação do evento de toque</h3>
<p>To enable/disable touch event simulation, click the icon of a hand with a pointy finger:</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;">While touch event simulation is enabled, mouse events are translated into <a href="/en-US/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a>.</p>
<h3 id="Controlar_o_comportamento_de_recarregar_a_página">Controlar o comportamento de recarregar a página</h3>
<p>New in Firefox 60 is the <em>Reload when...</em> drop-down menu:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15841/reload-behavior-controls.png" style="display: block; margin: 0 auto;"></p>
<p>Clicking it reveals two options, both of which are disabled by default:</p>
<ul>
<li>Reload when touch simulation is toggled: Checking this checkbox causes an automatic page reload whenever touch event simulation is enabled.</li>
<li>Reload when user agent is changed: Checking this checkbox causes an automatic page reload whenever the user agent is changed.</li>
</ul>
<p>Before Firefox 60, such reloads occurred automatically because certain page behaviors would otherwise not be applied. For example, many pages check for touch support on load and only add event handlers if it is supported, or only enable certain features on certain browsers.</p>
<p>However, if you are not interested in examining such features (maybe you are just checking the overall layout at different sizes), these reloads can waste time and possibly result in the loss of productive work, so it is useful to be able to control these reloads.</p>
<p>Now when you change such settings for the first time, you'll be given a warning message that tells you these reloads are no longer automatic, and informed about how you can make them automatic. For example:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/15840/page-reload-warning.png" style="display: block; margin: 0 auto;"></p>
<h3 id="Alternar_orientação">Alternar orientação</h3>
<p>To switch the screen orientation between portrait and landscape, click the icon next to the device selector:</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="Acelerar_a_rede">Acelerar a rede</h2>
<p>If you do all your development and testing using a very fast network connection, you may see problems with your site as soon as it's accessed using a slower connection. In Responsive Design Mode you can instruct the browser to emulate, very approximately, the characteristics of various different types of networks.</p>
<p>The characteristics emulated are:</p>
<ul>
<li>Download speed</li>
<li>Upload speed</li>
<li>Minimum latency</li>
</ul>
<p>The table below lists the numbers associated with each network type, but please do not rely on this feature for exact performance measurements; it's intended to give an approximate idea of the user experience in different conditions.</p>
<table class="fullwidth-table standard-table">
<thead>
<tr>
<th scope="col">Selection</th>
<th scope="col">Download speed</th>
<th scope="col">Upload speed</th>
<th scope="col">Minimum latency (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>To select a network, click the list box that's initially labeled "No throttling":</p>
<p><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="Capturar_Ecrã">Capturar Ecrã</h2>
<p>To take a screenshot of the viewport, click the camera icon:</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;"></p>
<p>Screenshots are saved to Firefox's default download location.</p>
<p>Starting in Firefox 53, if you checked "Screenshot to clipboard" in the Developer Tools <a href="/en-US/docs/Tools/Settings">Settings</a> page, then the screenshot will also be copied to the system clipboard.</p>
|
