Responsive Design Mode ¶
Toggling Responsive Design Mode ¶
From the Firefox menu: Select Responsive Design Mode from the Browser Tools 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 From the keyboard: Press Ctrl + Shift + M (or Cmd + Opt + M on macOS).
Controlling Responsive Design Mode ¶
Name of the selected device - A drop-down list that includes whatever devices you have selected from the Device Settings screen. Screen size - You can edit the width and height values to change the device size by editing a number directly or using the Up and Down keys to increase or decrease the value by 1 pixels on each keypress or hold and Shift to change the value by 10. The mouse wheel changes the size values by 1 pixel at a time You can also change the device’s screen size by grabbing the bottom-right corner of the viewport and dragging it to the size you want.
Orientation (portrait or landscape) - This setting persists between sessions DPR (pixel ratio) - Beginning with Firefox 68, the DPR is no longer editable; create a custom device in order to change the DPR Throttling - A drop-down list where you can select the connection throttling to apply, for example 2G, 3G, or LTE Enable/Disable touch simulation - Toggles whether or not Responsive Design Mode simulates touch events. While touch event simulation is enabled, mouse events are translated into touch events ; this includes (starting in Firefox 79) translating a mouse-drag event into a touch-drag event. (Note that when touch simulation is enabled, this toolbar icon is blue; when simulation is disabled, it is black.
Camera button - take a screenshot Screenshots are saved to Firefox’s default download location. If you checked “Screenshot to clipboard” in the Developer Tools Settings page, then the screenshot will be copied to the system clipboard.
Settings button - Opens the RDM settings menu Close button - closes RDM mode and returns to regular browsing
Left-align Viewport - when checked moves the RDM viewport to the left side of the browser window Show user agent - when checked displays the user agent string The final two options define when the page is reloaded: Reload when touch simulation is toggled: when this option is enabled, the page is reloaded whenever you toggle touch support. Reload when user agent is changed: when this option is enabled, the page is reloaded whenever the user agent is changed.
Developer Toolbox with RDM ¶
Device selection ¶
Screen size Device pixel ratio (the ratio of device physical pixels to device-independent pixels) Touch event simulation
Creating custom devices ¶
Name Size DevicePixelRatio User Agent String Touch Screen
Network throttling ¶
Download speed Upload speed Minimum latency
|
|
|
|
---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|