Can GrabzIt Capture Screenshots of Responsive Web Pages?

Yes. GrabzIt can capture pages at mobile and tablet browser widths. To request a mobile version, set the mobile request option and a mobile browser width. A width change alone does not guarantee a mobile design: GrabzIt says that if the target has no mobile version, it displays the standard website.

For a mobile capture, GrabzIt recommends a browser width of 320 pixels and a mobile request. For a tablet capture, leave the mobile request unset and use a browser width such as 768 pixels. These are vendor recommendations for capture settings, not universal device standards. GrabzIt’s mobile screenshot guidance explains both modes.

How responsive capture works

Three settings are easy to conflate:

Rendering mode: whether you request a mobile version or use the ordinary browser mode.
Browser width: the viewport width used to render the page and trigger responsive breakpoints.
Capture extent and output size: whether the image shows the browser viewport or the whole page, and how the resulting image is sized.

For mobile, GrabzIt’s JavaScript API example sets requestas: 1 and bwidth: 320. For tablet, omit the mobile request and choose a width such as 768. To inspect another responsive breakpoint, set the browser width to the viewport you want to evaluate. The JavaScript parameter reference documents bwidth as browser width and bheight as browser height.

Mobile mode is a request to serve a mobile version where the site provides one. It is not a guarantee that the page will switch layouts. Many responsive sites use the same URL and adapt to viewport width; others may select a version based on the request. Check the result rather than assuming the option forces a particular design.

GrabzIt JavaScript API: mobile screenshot

Here is the core configuration from GrabzIt’s JavaScript API example. Add it to an application already configured with the GrabzIt JavaScript library and your application key. The capture options request a PNG, mobile rendering, and a 320-pixel browser width:

var options = {
  format: "png",
  requestas: 1,
  bwidth: 320
};

GrabzIt("YOUR_APPLICATION_KEY").URLToImage("https://example.com", options).Then(function (id) {
  // The capture has been submitted. Use the library's documented
  // save or callback flow to retrieve the resulting image.
});

The values requestas: 1 and bwidth: 320 follow GrabzIt’s documented JavaScript mobile example. The submission call is asynchronous; the snippet shows the capture configuration, not a complete result-download handler. Wire result retrieval into the save/callback flow used by the JavaScript library version in your project. See GrabzIt’s JavaScript parameters and mobile screenshot guide.

Capture tablet and custom responsive widths

For tablet, remove requestas and set bwidth to the width you intend to inspect. A minimal options object looks like this:

var tabletOptions = {
  format: "png",
  bwidth: 768
};

GrabzIt("YOUR_APPLICATION_KEY").URLToImage("https://example.com", tabletOptions).Then(function (id) {
  // Retrieve the completed capture through your configured result flow.
});

For a layout breakpoint test, repeat the capture with the relevant widths. Keep the mode consistent while comparing ordinary responsive rendering; if you specifically need a mobile version, use the mobile request and width together. The selected width is the browser viewport, not necessarily the output image width.

Viewport screenshots versus full-page screenshots

A viewport screenshot captures the browser area; a full-page capture extends to the document’s page length. These are different from output width and height. In GrabzIt’s documented ASP.NET image options, setting BrowserHeight to -1 requests a full-length capture, while setting OutputWidth and OutputHeight to -1 keeps the image at browser scale. Check the equivalent property names for the GrabzIt client library you use. See GrabzIt’s ASP.NET capture options.

For a responsive full-page image, preserve the intended browser width while enabling full-page height. A full-page image can be very tall, and scaling it to a different output width can make text and layout details harder to inspect. GrabzIt’s documented maximum screenshot size depends on the package; its support article describes a 65,500-pixel practical height limit. Consult the size guidance if capturing long pages.

Check a responsive page systematically

Choose the actual page URL and a browser width that matches the layout you need to inspect.
For a mobile-specific version, enable GrabzIt’s mobile request option as well as setting a mobile width. For tablet or ordinary responsive checks, leave that option off.
Choose viewport-only or full-page capture independently of the browser width.
Capture the page and inspect the output for the expected layout, loaded content, and any scaling artifacts.
If a breakpoint looks wrong, try the nearby widths around the breakpoint and compare results. A viewport can fall on either side of a CSS media query threshold.

Common problems and fixes

Symptom	Likely cause	What to try
The mobile request still shows the desktop design.	The target may not provide a separate mobile version, or its responsive behavior may depend on viewport width.	Keep the mobile request and width together for a mobile-specific attempt. Also test ordinary rendering at the target width. GrabzIt notes that sites without a mobile version show the standard website.
The page layout does not match the width you expected.	The browser viewport is different from the intended breakpoint, or the page uses breakpoints near the selected width.	Set the browser width explicitly and compare captures at nearby widths. Do not infer viewport width from output image dimensions.
The screenshot cuts off content.	The capture is viewport-only, or the chosen browser height does not include the whole page.	Use the client library’s full-page option. In ASP.NET, GrabzIt documents `BrowserHeight = -1`; confirm the corresponding option for your language.
Images, fonts, or page content are missing.	The target may not have finished loading when capture occurs.	Use the delay or wait-for-element options supported by your client library. GrabzIt’s consistency guidance suggests trying a delay of 5000 milliseconds or more when a page needs additional load time.
The result looks softer or different from the browser.	Output scaling may differ from browser scale, or the comparison browser may render differently.	Compare in Chrome, which GrabzIt identifies as the basis for its capture software, and avoid unnecessary output resizing. See the browser consistency guidance.

Performance, reliability, and cost considerations

Responsive checks often require several captures of the same URL at different widths. Keep the requested widths limited to the breakpoints you actually need; every additional capture adds another capture operation and result to handle. If the page renders content after its initial load, waiting for a suitable element or using a delay can make results more representative, at the cost of longer capture time.

For repeatable comparisons, keep the URL, capture extent, output sizing, and loading conditions constant while changing only the browser width or rendering mode under evaluation. Dynamic pages can vary between captures, so record the width and mode alongside each image. GrabzIt’s package limits and pricing are not specified in this guide; check its current service information before estimating cost or planning high-volume capture.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its one-call API can return a screenshot at a requested viewport without managing a browser in your application. The example uses the documented API format; see the ScreenshotNeo API documentation.

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

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
const bytes = new Uint8Array(await res.arrayBuffer());
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes));

ScreenshotNeo removes cookie banners, popups, and chat widgets before the shot. Bot checks, blank pages, and failed loads are never billed. Its MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up for free and get 1,000 screenshots a month with no card.

FAQ

Does setting the browser width make any site mobile responsive?

No. It changes the capture viewport, but the target must have responsive behavior or a mobile version for the layout to change.

Should I use mobile mode for a tablet screenshot?

GrabzIt’s guidance is to omit the mobile request and set the desired tablet browser width, such as 768 pixels.

Are 320 and 768 required device widths?

No. They are GrabzIt’s suggested starting widths for mobile and tablet captures. Use the width that matches the breakpoint or viewport you need to inspect.