Responsive Design Mode

Responsive design is the practice of designing a website so it looks and works properly on a range of different devices: in particular, 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.

Toggling Responsive Design Mode

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 OS X).
• From the Developer Tools toolbox: press the "Responsive Design Mode" button in the Toolbox's toolbar:
• From the keyboard: press Ctrl + Shift + M, (or Cmd + Opt + M on OS X).

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

Device selection

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:

• screen size
• device pixel ratio (the ratio of device physical pixels to device-independent pixels)
• touch event simulation.

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, and enabling 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.

Saving custom devices

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.

Device controls

You can also supply custom values for most device properties.

Setting screen size

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.

Setting device pixel ratio

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

Toggling touch event simulation

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.

Enabling touch event simulation forces the page to reload because many pages check for touch support on load, and only add event handlers if it is supported.

Toggling orientation

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

Network throttling

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.

To select a network, click the list box that's initially labeled "No throttling":

Taking a screenshot

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.