Firefox Responsive Design Mode: DPR, Touch Simulation, Network Throttling, and Device Presets

Firefox's Responsive Design Mode (RDM) is a robust tool for testing websites on various screen sizes, devices, and network conditions. It offers more functionality than Chrome's DevTools device mode. To open RDM, press Ctrl+Shift+M on Windows/Linux or Cmd+Shift+M on Mac. Alternatively, you can use the DevTools F12 interface and select the responsive icon or right-click on the page, choose Inspect, and switch to responsive view. Upon opening, a resizable viewport appears, along with simulation tools in the toolbar.

Resizing the viewport is done by dragging the edges, while the dimensions are shown at the top in real-time. Manual entry is possible by clicking the display and entering exact pixel values. Rotating the viewport swaps width and height, simulating landscape and portrait orientations. The device dropdown supplies presets for typical devices, such as iPhone SE, 12, 14 Pro Max, iPad, iPad Pro, Samsung Galaxy, Pixel, and Kindle Fire.

Each preset automatically sets width, height, device pixel ratio, and user agent. You can also create custom device presets by clicking Edit list... and adding a custom preset with your own dimensions and DPR.

Touch simulation allows you to test touch-specific code paths by converting mouse clicks into touchstart/touchend events and activating dragging. This enables JavaScript's window.ontouchstart to return true. The User Agent (UA) string can be set directly in the toolbar, allowing you to test UA-sniffing code that serves different content to mobile browsers. However, UA sniffing is discouraged in favor of feature detection.

The DPR button enables simulation of high-DPI screens by switching between 1x, 2x, and 3x ratios. Images served via srcset with 2x descriptors will load the 2x version when DPR 2x is enabled. Network throttling simulates slow connections, including Good 3G (~750 Kbps), Regular 3G (~250 Kbps), and Poor 2G. These presets apply to all network requests from the RDM viewport.

Screenshot capture captures a screen of the entire viewport at current dimensions, matching the pixel dimensions (DPR affects the resolution of the captured image).

RDM can be used alongside DevTools, with DevTools panels running on the RDM viewport. This allows you to test how your site performs on simulated mobile conditions using network throttling and the Performance panel. Common testing workflows involve opening RDM, setting device presets, enabling touch simulation, and adjusting network throttling.

Keep in mind that RDM has limitations, such as not simulating fonts, native input elements, vibration API, device sensors, or actual performance. For final mobile testing, always test on a real device or a device emulator.