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.
There are three ways to toggle Responsive Design Mode:
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.
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.
{{EmbedYouTube("JNAyKemudv0")}}
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.
Starting in Firefox 54, you can save custom devices in Responsive Design Mode. Each device can have its own:
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.
You can also supply custom values for most device properties.
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.
To set a custom device pixel ratio, click the list box labeled "DPR" and select the value you want:
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.
New in Firefox 60 is the Reload when... drop-down menu:
Clicking it reveals two options, both of which are disabled by default:
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:
To switch the screen orientation between portrait and landscape, click the icon next to the device selector:
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:
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.
| Selection | Download speed | Upload speed | Minimum latency (ms) |
|---|---|---|---|
| GPRS | 50 KB/s | 20 KB/s | 500 |
| Regular 2G | 250 KB/s | 50 KB/s | 300 |
| Good 2G | 450 KB/s | 150 KB/s | 150 |
| Regular 3G | 750 KB/s | 250 KB/s | 100 |
| Good 3G | 1.5 MB/s | 750 KB/s | 40 |
| Regular 4G/LTE | 4 MB/s | 3 MB/s | 20 |
| DSL | 2 MB/s | 1 MB/s | 5 |
| Wi-Fi | 30 MB/s | 15 MB/s | 2 |
To select a network, click the list box that's initially labeled "No throttling":
To take a screenshot of the viewport, click the camera icon:
Screenshots are saved to Firefox's default download location.
Starting in Firefox 53, if you checked "Screenshot to clipboard" in the Developer Tools Settings page, then the screenshot will also be copied to the system clipboard.