Firefox Responsive Design Mode: Touch Simulation, DPR, Breakpoints, and Dark Mode Toggle

Responsive Design Mode (RDM) in Firefox is a full-featured tool for testing how your site looks and behaves at different screen sizes. Here's everything it can do — most tutorials only show the basics.

Opening Responsive Design Mode

• Keyboard: Ctrl+Shift+M (or Cmd+Opt+M on Mac)
• DevTools: Press F12 → toolbar icon (phone/tablet icon)
• Menu: Three-dot → Web Developer → Responsive Design Mode

The page gets a device frame with resize handles. The width and height display shows current dimensions.

Presets and Custom Sizes

The dropdown at the top-left shows device presets:

• iPhone SE, iPhone 12, Galaxy S21, iPad, etc.
• Click to instantly resize to that device's screen

Add custom preset:

1. Resize to your desired size by typing in the dimension boxes
2. Click the dropdown → "Add Custom Device"
3. Name it, save it
4. Appears in the dropdown from now on

Edit the dimension directly: Click the width or height number → type your value → Enter.

Rotate: The rotate icon (portrait/landscape toggle) swaps width and height. Good for testing landscape on phones.

DPR (Device Pixel Ratio) Simulation

The DPR dropdown simulates high-density displays:

• DPR 1: Standard screen (72-96 DPI)
• DPR 2: Retina/HiDPI display (144 DPI, typical for iPhone/macOS)
• DPR 3: High-DPI (Galaxy S-series, etc.)

Why it matters: At DPR 2, a 1px border is half a physical pixel — can look thin. Images declared at 1x look blurry at DPR 2. This matters for srcset and @2x image testing.

Test srcset:

<img 
  src="image-1x.jpg" 
  srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x"
  alt="Responsive image">

In Network panel with different DPR values, see which image is fetched.

Touch Simulation

Touch enabled toggle (phone icon): Simulates touch events instead of mouse events.

With touch enabled:

• Mouse clicks are translated to touchstart/touchend events
• pointer: coarse media query returns true
• hover: none media query returns true
• Drag gestures work as touch drag

Test hover states vs touch: With touch enabled, :hover CSS doesn't apply (touch devices don't have hover). Your tap targets should work without hover states.

Pinch zoom: Ctrl+drag simulates pinch-to-zoom gesture.

Test mobile-only interactions: Touch-specific JavaScript events (touchstart, touchmove, touchend) fire correctly in touch simulation mode.

Throttling

Network throttling: The dropdown in RDM toolbar (or in Network panel). Simulate slow connections:

• "GPRS" (50 Kbps) — worst case mobile
• "Good 2G" (450 Kbps)
• "Good 3G" (1.5 Mbps)
• "Regular 4G" (4 Mbps)

With throttling:

• See which resources delay page load
• Test loading states (spinners, skeleton screens)
• Measure waterfall timing for assets

CPU throttling (Performance panel, not RDM): Slows down JavaScript execution to simulate low-end devices. RDM doesn't throttle CPU; use the Performance panel's throttling for that.

Screenshot

The camera icon in RDM toolbar takes a screenshot:

• Full page: Ctrl+Shift+S (also works outside RDM)
• Visible area: Camera icon in RDM toolbar

Screenshots save to your Downloads folder with the device dimensions in the filename.

Use case: Quick visual testing snapshots at specific breakpoints. Take screenshots at 320px, 768px, 1024px, 1440px to see your responsive design.

Media Queries in Inspector

While in RDM, the CSS Inspector shows which media queries are active for the current size. Look in the responsive indicator bar (if enabled) — shows breakpoints from your CSS.

The breakpoint ruler (Firefox 88+): In RDM, if your CSS has @media queries, small triangles appear on the width ruler showing where breakpoints are. Click a triangle to snap to that breakpoint width.

This makes it easy to test exactly at your breakpoints.

Testing with prefers-color-scheme

The RDM toolbar includes a dark/light mode toggle that sets prefers-color-scheme:

• Sun icon: prefers-color-scheme: light
• Moon icon: prefers-color-scheme: dark

Test your dark mode CSS without changing OS settings. Switch between light/dark instantly to compare.

Testing print styles

RDM toolbar (or DevTools toolbar): Print simulation toggle sets @media print active.

Test your print CSS without opening the print dialog every time.

Viewport Meta Tag Simulation

The RDM correctly simulates the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

Without this tag, mobile browsers typically show the full desktop page zoomed out. The RDM simulates this behavior:

• Without viewport meta: page renders at 980px wide (default) then scaled down
• With viewport meta: page renders at device width

Test: Remove the viewport meta tag and see your site in RDM — it should show the zoomed-out view that a phone would show without the meta tag.

Testing :focus-within and :focus-visible

Keyboard navigation and focus styles are important for accessibility. Test them in RDM by:

1. Tab through the interface
2. Check that focused elements are visible
3. Check that focus styles work correctly on touch vs keyboard

CSS for accessible focus:

:focus-visible {
  outline: 3px solid blue;
}

/* Suppress focus ring on click but not keyboard */
:focus:not(:focus-visible) {
  outline: none;
}

In RDM with touch mode on, :focus-visible doesn't apply for click/tap. Only keyboard navigation shows the focus ring. Verify this works correctly.

Comparing Layouts

Firefox RDM doesn't have a side-by-side comparison mode. Alternative:

1. Open the same page in two tabs
2. Tile the windows
3. Set different widths in each

Or: use responsive-design-checker or Blisk for side-by-side.

Common RDM Testing Checklist

For each breakpoint:

• [ ] Text remains readable (no overflow, proper font size)
• [ ] Navigation collapses to mobile menu
• [ ] Images scale correctly (no overflow or excess whitespace)
• [ ] Tap targets are at least 44x44px (touch)
• [ ] Forms are usable (input fields not too small)
• [ ] Tables either scroll or stack properly
• [ ] Fixed/sticky elements work correctly
• [ ] Content order makes sense at each size

At both DPR 1 and DPR 2:

• [ ] Retina images load (srcset working)
• [ ] Borders and decorative elements look sharp
• [ ] Icons are crisp (SVG preferred over raster for icons)

Firefox RDM vs Chrome DevTools

Both have similar RDM features:

• Device presets
• Custom dimensions
• DPR simulation
• Network throttling
• Touch simulation

Firefox advantages:

• Breakpoint ruler showing @media breakpoints visually
• Print media simulation toggle in toolbar
• Color scheme toggle (dark/light) in toolbar
• Integrated screenshot with device frame

Chrome advantages:

• "Show device frame" option for realistic mockups
• More device presets

For most responsive design work, both tools are sufficient. The breakpoint ruler in Firefox is particularly useful.