How to Capture a Webpage in Firefox at a Specific Viewport Size
Set an exact width and height in Firefox Responsive Design Mode, capture the viewport, and choose the right settings for repeatable results.
To capture a webpage at a specific viewport size in Firefox, open Responsive Design Mode (RDM), set the width and height above the page, then click the camera button. Firefox saves the screenshot to its default download location, unless Developer Tools is configured to copy screenshots to the clipboard.
Capture a specific viewport in Firefox
- Open the webpage you want to capture.
- Open Responsive Design Mode using one of these methods:
- Press Ctrl+Shift+M on Windows or Linux.
- Press Cmd+Opt+M on macOS.
- Choose Responsive Design Mode from Firefox’s Browser Tools menu, or open it from the Developer Tools toolbar.
- Edit the width and height fields above the viewport. Enter both dimensions explicitly. RDM starts at 320 × 480 pixels, so do not assume its initial size is the one you need.
- Wait for the page to adjust and finish rendering at the chosen size.
- Click the camera button beside the size controls. The screenshot is saved to Firefox’s default download location unless screenshot-to-clipboard behavior is enabled in Developer Tools settings.
Mozilla documents these controls in its Responsive Design Mode guide.
Set the viewport precisely
You can change the dimensions by typing into the width and height fields. RDM also supports keyboard and pointer adjustments:
- Use the Up and Down keys to adjust a dimension one pixel at a time.
- Hold Shift while pressing Up or Down to adjust by ten pixels.
- Use the mouse wheel for one-pixel changes.
- Drag the viewport’s bottom-right corner to resize it.
For a repeatable comparison, record the width and height and enter the same values for each capture. Also record any device profile, device pixel ratio (DPR), touch simulation, or user-agent setting that affects the page.
Viewport screenshot, full page, or crop?
Choose the capture method based on the image you need. A viewport screenshot shows what fits inside the emulated browser viewport; a full-page screenshot extends beyond it.
| Goal | Firefox method | What you get |
|---|---|---|
| Capture a page at a chosen viewport width and height | RDM camera button | The page as rendered in the resized viewport |
| Capture only the current visible area | Right-click an empty area and choose Take Screenshot, then Save visible | The currently visible part of the page |
| Capture the entire document | Take Screenshot, then Save full page | A full-page image that can extend beyond the viewport |
| Capture a custom region | Take Screenshot, then click and drag to select an area | A crop you can resize or reposition before saving |
Firefox’s general screenshot tool also opens with Ctrl+Shift+S on Windows or Linux, or Command+Shift+S on macOS. Its visible-area, full-page, and region options are separate from setting a viewport size in RDM. See Mozilla’s guide to taking screenshots in Firefox.
Choose device settings beyond width and height
Viewport dimensions alone do not define every device behavior. RDM can also emulate DPR, touch input, and a user agent.
- Device pixel ratio: Set DPR when the comparison depends on display pixel density or the screenshot’s pixel output. A custom device can define its own DPR.
- Touch simulation: Enable touch when the page changes behavior for touch-capable devices.
- User agent: A listed device profile changes Firefox’s User-Agent header to identify as that device’s default browser. A custom device can specify a user-agent string.
- Device profiles: Selecting a listed device sets its screen size, DPR, and touch simulation. Custom devices can define a name, dimensions, DPR, user agent, and touch-screen property.
- Network throttling: RDM offers network throttling, but Mozilla describes the results as approximate. Use it to inspect a rough experience under constrained conditions, not as an exact performance measurement.
These settings emulate selected characteristics; they do not guarantee that a screenshot will match every detail of a physical phone or tablet. Mozilla explains that screen size, pixel density, and touch support can all affect page behavior in its RDM documentation.
Make captures more consistent
- Set the same viewport dimensions. Responsive layouts can change at breakpoints, so even a small width difference may move content or trigger another layout.
- Choose the relevant device properties. Match DPR, touch, or user agent only when they matter to the page or comparison.
- Wait for rendering to settle. Let fonts, images, and responsive content finish updating before clicking the camera.
- Reload when needed. If changing user agent or touch simulation should rerun code that checks those values at page load, ensure the corresponding reload setting is enabled or reload manually. Some page behavior only applies after a reload.
- Check the output destination. Look in Firefox’s default download location, or enable Screenshot to clipboard in Developer Tools settings if you want clipboard output.
Or skip the browser setup
If you need an image from a URL without opening Firefox and setting up a viewport, ScreenshotNeo provides a screenshot API and MCP server. The API returns an image or PDF from one GET request. See the ScreenshotNeo API documentation for options, including viewport dimensions.
curl -G "https://api.screenshotneo.com/v1/shot" \
-d access_key=YOUR_API_KEY \
--data-urlencode url=https://stripe.com \
-o shot.webpimport requests
r = requests.get(
"https://api.screenshotneo.com/v1/shot",
params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
timeout=90,
)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({
access_key: 'YOUR_API_KEY',
url: 'https://stripe.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents use screenshot tools. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for 1,000 free screenshots a month, with no card required.
Troubleshooting
| Problem | Likely cause | What to do |
|---|---|---|
| The page layout does not match the expected device | Only width and height were set; the site may also check DPR, touch, or user agent. | Select an appropriate device profile or configure those properties in a custom device. Reload if the page reads them only at startup. |
| The screenshot has the wrong dimensions or content scope | You used the general screenshot tool’s visible or full-page mode instead of RDM’s camera. | Set the dimensions in RDM and use its camera for a viewport capture. Use Save visible or Save full page only when that scope is intended. |
| The screenshot is missing late-loading content | The capture was taken before images, fonts, or page updates finished. | Wait for the page to settle before taking the screenshot. If a changed emulation setting affects startup behavior, reload and wait again. |
| The image was not downloaded | Screenshot-to-clipboard behavior may be enabled. | Check the Developer Tools setting and system clipboard, or disable clipboard behavior and capture again. Otherwise check Firefox’s default download location. |
| It is difficult to move a screenshot crosshair | Mozilla notes that crosshair movement does not work on Wayland. | Use another supported selection method or environment for that crop workflow. |
| Throttled behavior does not match a measured real-world speed | RDM network throttling is approximate. | Treat it as an emulation for inspection, not an exact performance benchmark. |
Performance, reliability, and cost
Firefox’s built-in tools cover local viewport screenshots, visible-area and full-page captures, crops, downloads, and clipboard copying without a screenshot service. Capture time depends on the page’s rendering and loading; wait for the content you need before taking the image. For consistent results, keep viewport and emulation settings fixed and reload when the page depends on startup-time device checks.
If you automate captures across URLs or need an API or agent workflow, ScreenshotNeo supports bulk capture of up to 100 URLs per call, caching with a chosen TTL, asynchronous jobs with signed webhooks, signed links for public image tags, and a usage API. Its billing rules say only clean shots are billed: bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers report the page verdict and billing status. Plans are Free for 1,000 shots a month, Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000; yearly billing gives two months free, and every feature is on every plan. Check the documentation for configuration details.
FAQ
Does RDM take a full-page screenshot?
The RDM camera captures the displayed viewport. For the complete document, use Firefox’s separate Take Screenshot interface and choose Save full page.
Can I set a custom width and height instead of choosing a device?
Yes. Edit the numeric screen-size fields directly. Device profiles are optional and add settings such as DPR, touch simulation, and user agent.
Where does Firefox save an RDM screenshot?
It goes to Firefox’s default download location unless the Developer Tools Screenshot to clipboard setting is enabled.
Will the result be identical to a physical device?
Not necessarily. RDM emulates selected device characteristics, but the documentation does not promise a perfect match for every physical device detail.
