ScreenshotNeo

BlogHow-to

How to capture product screenshots without triggering a site’s mobile redirect

Set a desktop browser context before loading the product page, then capture its viewport or full page with Chrome DevTools or Playwright.

By the ScreenshotNeo team4 October 20266 min read

To capture a product page without triggering its mobile redirect, set a desktop device type and the intended desktop viewport before navigating or reloading. Do not use a mobile device profile or mobile user-agent when you want the desktop experience. Then capture the visible viewport or the full page. This avoids redirects tied to emulated mobile signals, but no browser setting can guarantee how every site will route visitors.

Choose the right capture method

For a one-off screenshot, Chrome DevTools is the shortest path. For repeatable screenshots or a batch of product pages, use Playwright so the browser context and viewport are set in code before navigation. Both methods simulate a browser context; if you need to know how the page behaves on an actual handset, use a real-device check.

Need Use
One manual capture Chrome DevTools Device Mode
Repeatable or scripted captures Playwright
Actual handset behavior Remote debugging on a real device

Capture once with Chrome DevTools

  1. Open Chrome DevTools and enable Device Mode if you need to set responsive dimensions.
  2. In the Device Type menu, choose Desktop. Choose Mobile only when you are intentionally testing the mobile experience.
  3. Set the viewport width and height before opening the product page, or reload it after changing the device context.
  4. Navigate to the product URL. Check the final URL and confirm that the desktop layout loaded.
  5. Open the DevTools command menu and choose Capture screenshot for the visible viewport, or Capture a full size screenshot for the full page.

Device Mode approximates a device context; it does not run the page on a physical phone. Chrome documents its purpose as approximating how a page looks and performs on a mobile device. If actual device behavior matters, use remote debugging on a real device. See Chrome’s Device Mode guide.

Automate the capture with Playwright

Set the viewport when creating the browser context, before navigating. Avoid a mobile device profile for a desktop capture. The following Node.js example creates a desktop-sized context, visits a page, and writes both a viewport screenshot and a full-page screenshot.

import { chromium } from 'playwright';

const url = 'https://example.com/product';
const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({
  viewport: { width: 1440, height: 1000 },
  isMobile: false,
  hasTouch: false
});
const page = await context.newPage();

try {
  await page.goto(url, { waitUntil: 'domcontentloaded', timeout: 30000 });
  console.log('Final URL:', page.url());
  await page.screenshot({ path: 'product-viewport.png' });
  await page.screenshot({ path: 'product-full-page.png', fullPage: true });
} finally {
  await browser.close();
}

Install Playwright in your project with npm install -D playwright and install its browser with npx playwright install chromium. Run the file with Node.js. The viewport screenshot captures the currently visible area; fullPage: true captures the full scrollable page. Playwright’s device profiles can configure user-agent, screen size, viewport, and touch behavior, so do not select a phone profile for this desktop workflow. See Playwright emulation and the Page screenshot API.

When the site requires a desktop user-agent

A desktop viewport alone may not change a redirect if the site also checks the user-agent. You can set a desktop user-agent on the context before creating the page. Use a current user-agent appropriate to the browser you run; user-agent strings change and this does not guarantee a particular site’s routing behavior.

const context = await browser.newContext({
  viewport: { width: 1440, height: 1000 },
  isMobile: false,
  hasTouch: false,
  userAgent: 'Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36'
});

Do not copy an arbitrary user-agent into production automation indefinitely. Maintain it alongside the browser version you actually run, and check the final URL after navigation. Chrome DevTools Protocol also exposes user-agent override controls; see the Emulation.setUserAgentOverride documentation.

Viewport versus full-page screenshots

  • Viewport: captures what is visible at the chosen width and height. Use it when documenting the first screen or comparing a consistent fold.
  • Full page: captures content below the fold. Use it for a complete product-page record, while checking that lazy-loaded content has appeared before saving.

For a tall page, the screenshot may be much larger than a viewport image. Some content only loads after scrolling; if it is missing, scroll through the page or wait for the relevant content before capture. A full-page image documents page length, but it does not prove that a real phone would receive the same page.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its API accepts a URL in one GET request and returns an image or PDF. For a straightforward capture, use the documented ScreenshotNeo API call below:

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
)
r.raise_for_status()
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}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await Bun.write('shot.webp', res);

Replace the example target URL with the product page you need. ScreenshotNeo accepts common screenshot API parameter names, which can simplify switching an existing integration. Cookie banners are accepted and removed before capture, along with supported newsletter popups and chat widgets; those cleanup steps can be turned off. Bot checks or 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 offers take_screenshot, get_page_info, and capture_pdf for AI agents using Claude, Cursor, or another MCP client. The free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots.

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

Troubleshooting

Symptom Likely cause What to try
The page still redirects to a mobile URL The site may use user-agent or other routing rules in addition to viewport size. Confirm Device Type is Desktop, reload after setting the context, inspect the final URL, and if appropriate try a desktop user-agent. Site-specific rules can still redirect.
The layout looks mobile despite a wide viewport A mobile device profile or mobile user-agent may still be active, or the site may have its own responsive rules. Check the device profile and context settings. Recreate the Playwright context with desktop settings, then navigate again.
The screenshot is only the first screen A viewport capture was used. Use DevTools’ full-size screenshot command or Playwright’s fullPage: true.
Images or sections are missing from the full-page shot They may load lazily or after page scripts run. Wait for the relevant selector or scroll through the page before capturing; then inspect the saved image.
Playwright times out on navigation The page may be slow, or the chosen navigation wait condition may never settle because of ongoing requests. Check network access and the target URL. Use a suitable timeout and wait for a concrete page element when that is more meaningful than waiting for every network request to stop.
Manual capture does not match automated capture The browser version, viewport, user-agent, or other context settings may differ. Align the viewport and device settings, record the final URL, and compare the contexts before treating the screenshots as equivalent.

Performance, repeatability, and reliability

  • For one page, DevTools avoids writing automation code. For repeated pages, Playwright makes the viewport and context explicit and repeatable; this is a workflow distinction, not a speed benchmark.
  • Choose a viewport large enough for the desktop layout you want, but avoid needlessly huge dimensions that increase image size.
  • Wait for a page-specific readiness signal where possible. Network-idle waiting can be unreliable on pages with persistent requests; a visible product title or other stable element can be a better capture point.
  • Log the requested URL, final URL, viewport, user-agent choice, and capture type when screenshots are part of a recurring process. This helps diagnose routing changes.
  • A successful screenshot only shows what the selected browser context rendered. It cannot establish that every visitor or physical device will see the same result.

FAQ

Will changing the viewport always stop the redirect?

No. It helps when a site’s routing depends on emulated device signals. Sites may use other conditions, and browser settings cannot guarantee the route.

Should I use Chrome Device Mode for mobile screenshots?

Use it to approximate a mobile context and inspect responsive behavior. For behavior specific to a physical handset, check on a real device.

Does full-page capture include content that only appears after scrolling?

It can capture the full page, but lazy-loaded content may need to be triggered or allowed to load before the capture.