How to Set a Viewport Size in Screenshot.rocks

Screenshot.rocks’ URL capture offers documented desktop and mobile viewport presets; its W and H controls change the exported canvas, not the webpage viewport. For a custom responsive width, open the page in Chrome or Edge DevTools device mode and set the width in the Dimensions control.

Choose the Screenshot.rocks capture preset

1. Open the Screenshot.rocks screenshot editor and enter the page URL.
2. Leave Mobile unticked for the desktop preset, or tick Mobile for the phone-sized preset.
3. Capture the page. The online URL capture takes the first screen rather than the whole scrolling page.

Mode	Documented viewport	Density	Practical meaning
Desktop	1440 × 800	2×	A desktop-sized browser viewport.
Mobile	375 × 812 points	3×	An iPhone X-sized screen; the resulting image is 1125 × 2436 pixels.

Screenshot.rocks describes its mobile capture as loading the page the way an iPhone would, using a 375 × 812 point screen at 3× pixel density and an iPhone browser identity so sites serve their mobile layout. These are the documented presets; the URL capture flow does not document an arbitrary custom viewport width.

Set a custom viewport width in Chrome or Edge

Use browser device mode when you need to inspect a breakpoint or reproduce a specific responsive layout.

1. Open the target page in Chrome or Edge.
2. Open Developer Tools and turn on device mode.
3. In the device toolbar’s Dimensions controls, choose a device or enter the custom width and height you need.
4. Set the device pixel ratio if you need to adjust output sharpness.
5. Reload the page after changing device mode if its layout has not responded to the new dimensions.
6. Capture the visible browser area using your browser’s screenshot workflow or a browser capture tool.

Device mode changes the viewport the page sees, which can trigger responsive CSS and mobile layouts. Reloading can help when a page only checks its viewport during initial load. A custom viewport in DevTools is a browser workflow; do not treat Screenshot.rocks’ canvas W and H fields as a substitute.

Viewport size versus canvas size

The viewport is the browser area used to display the webpage during capture. It affects responsive breakpoints, layout, and which part of the page is visible. The canvas is the final exported image area. Changing canvas dimensions does not make the page render as though it had a different browser viewport.

Setting	What it controls	Use it when
Viewport width and height	The dimensions the webpage is rendered in	You need to check responsive behavior or a breakpoint.
Device pixel ratio	How many output pixels represent each viewport point or CSS pixel	You need a sharper or denser capture.
Canvas W and H	The dimensions of the exported mockup image	You need a particular final image size or composition.

The Screenshot.rocks guide says its canvas dimensions can be selected from presets or entered directly, with each side from 500 to 2300 px. Those values set the exported image dimensions. The online URL capture is limited to the first screen.

Choose the right capture method

• Use Screenshot.rocks URL capture when one of its documented desktop or mobile presets is suitable and the page is publicly accessible to its capture flow.
• Use DevTools device mode when you need a custom responsive width or need to capture a page already open in your browser session.
• Use the Screenshot.rocks browser extension to capture the visible part of the current tab when the page is available only in that browser session.

Screenshot.rocks says its mobile URL capture cannot access pages behind a login, local sites such as localhost, or pages that block automated browsers. For login-gated pages, browser device mode or the extension can use the page open in your own browser. The editor says images added by dropping, choosing, or pasting are processed in the browser; optional URL capture sends the URL to a server for rendering, and Screenshot.rocks says those inputs are not stored.

Troubleshooting viewport captures

Symptom	Likely cause	What to do
The layout does not change after editing W and H	W and H control the export canvas, not the browser viewport.	Set the viewport in DevTools device mode, then reload if needed.
The page still shows its desktop layout at a narrow width	The page may not have re-rendered after the viewport change, or its responsive breakpoint is elsewhere.	Reload in device mode and check the exact width at which the layout changes.
A mobile URL capture cannot reach the page	The page may require a login, be local, or block automated browsers.	Open it in your browser and use device mode or the extension.
The screenshot is only the top portion	The URL capture takes the first screen rather than the full scrolling page.	Use a browser-based workflow if you need to capture additional content.
The result is not as sharp as expected	Viewport dimensions and pixel density affect rendered output.	Check the device pixel ratio in DevTools; distinguish it from the final canvas dimensions.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. A single GET request can return an image or PDF. Its API supports custom viewports, device presets, full-page capture, and many other capture options. See the ScreenshotNeo API documentation.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import 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}`);

Before capture, ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides screenshot, page-info, and PDF tools for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots.

Sign up free for 1,000 screenshots a month, with no card required.

FAQ

What screen size does Screenshot.rocks use for mobile capture?

Its documented mobile viewport is 375 × 812 points at 3× density, producing a 1125 × 2436 pixel image.

Can I enter any viewport width in Screenshot.rocks?

The documented URL capture uses desktop and mobile presets. For a custom width, use browser device mode in Chrome or Edge.

Does changing the canvas size change the webpage layout?

No. Canvas W and H set the exported image dimensions. Set the browser viewport to change how the page responds.

Can the URL capture take a full-page screenshot?

The documented online URL capture takes the first screen. Use a browser workflow when you need more of a scrolling page.