Desenho adaptável 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.

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.

Alternar Modo de Desenho Adaptável

There are three ways to toggle Responsive Design Mode:

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).

From the Developer Tools toolbox: Press the "Responsive Design Mode" button in the Toolbox's toolbar:

Utilizar Modo de Desenho Adaptável

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.

You can show or hide the Developer Tools toolbox independently of toggling Responsive Design Mode itself:

While Responsive Design Mode is enabled, you can continue browsing as you normally would in the resized content area.

Seleção de dispositivo

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:

Additionally, Firefox will set the User-Agent 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 navigator.userAgent property will be set to the same value.

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 https://github.com/mozilla/simulated-devices.

Guardar dispositivos personalizados

Starting in Firefox 54, you can save custom devices in Responsive Design Mode. Each device can have its own:

Size

DevicePixelRatio

User agent

Touch support

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.

Controlos de dispositivo

You can also supply custom values for most device properties.

Definir tamanho do ecrã

To set screen size, click on the values under the viewport, and edit them:

You can also grab the bottom-left corner of the viewport and drag the viewport to the size you want.

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.

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.

Definir proporção do píxel do dispositivo

To set a custom device pixel ratio, click the list box labeled "DPR" and select the value you want:

Alternar simulação do evento de toque

To enable/disable touch event simulation, click the icon of a hand with a pointy finger:

While touch event simulation is enabled, mouse events are translated into touch events.

Controlar o comportamento de recarregar a página

New in Firefox 60 is the Reload when... drop-down menu:

Clicking it reveals two options, both of which are disabled by default:

Reload when user agent is changed: Checking this checkbox causes an automatic page reload whenever the user agent is changed.

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.

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.

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:

Alternar orientação

To switch the screen orientation between portrait and landscape, click the icon next to the device selector:

Acelerar a rede

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.

The characteristics emulated are:

Download speed

Upload speed

Minimum latency

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.