Does BrowserCat Support Mobile Viewport Screenshots?

Yes. BrowserCat supports mobile viewport screenshots through Playwright. Set a mobile-sized viewport and, when needed, mobile emulation options such as isMobile, hasTouch, and deviceScaleFactor, then call page.screenshot(). By default, this captures the visible viewport. Use fullPage: true when you want the whole document instead.

This is browser emulation, not a screenshot from a physical phone. BrowserCat’s reviewed browser documentation describes Chromium-based sessions; it says Firefox and WebKit are coming soon. If your question concerns actual device hardware or mobile operating-system behavior, also test on a real device.

1. What a mobile viewport screenshot captures

A viewport screenshot shows the page as rendered in the browser’s current visible area. Its width and height determine the visible region. A full-page screenshot is a different capture mode that extends beyond that visible region to include the page’s full document height.

Mobile emulation can also apply mobile-oriented browser settings, such as touch input and a device scale factor. These settings help you inspect responsive layouts, but they do not turn a desktop-hosted browser into a physical phone.

2. Capture a mobile viewport with BrowserCat and Playwright

BrowserCat’s documented workflow uses Playwright connected to its managed browser endpoint, wss://api.browsercat.com/connect. BrowserCat’s quick start demonstrates connecting to that endpoint and taking a screenshot. Use the current BrowserCat quick-start instructions for any account-specific connection or authentication configuration; the sources for this guide do not specify an authentication parameter.

Install Playwright in your Node.js project:

npm install playwright

Then use the following JavaScript flow. Configure the connectOverCDP call with the connection options required by your BrowserCat account, as shown in its current documentation. The remaining code sets a mobile-sized viewport, navigates to the page, and saves the visible viewport screenshot.

const { chromium } = require('playwright');

(async () => {
  // Use BrowserCat's documented connection and authentication settings.
  const browser = await chromium.connectOverCDP(
    'wss://api.browsercat.com/connect'
  );

  try {
    const context = await browser.newContext({
      viewport: { width: 390, height: 844 },
      isMobile: true,
      hasTouch: true,
      deviceScaleFactor: 2
    });
    const page = await context.newPage();

    await page.goto('https://example.com', {
      waitUntil: 'networkidle',
      timeout: 60000
    });
    await page.screenshot({ path: 'mobile-viewport.png' });

    await context.close();
  } finally {
    await browser.close();
  }
})().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

The viewport dimensions above are an example, not a named physical-device profile. Choose dimensions that match the layout you want to inspect. BrowserCat’s Playwright cheatsheet also documents Playwright device presets; use a preset when you want its bundled emulation settings rather than choosing each setting yourself.

BrowserCat’s documentation examples and configuration references:

BrowserCat quick start for connecting to its managed browser.
BrowserCat Playwright cheatsheet for viewport screenshots, mobile emulation, and device presets.
BrowserCat browser types for the documented browser-engine availability.
BrowserCat’s Playwright connection guide.

3. Choose viewport settings

Setting	What it controls	When to use it
`viewport`	The page’s emulated visible width and height in CSS pixels.	Set this for the responsive breakpoint and visible area you need to capture.
`isMobile`	Enables mobile-oriented emulation behavior supported by Playwright.	Use it when you want a mobile-emulation context rather than only a narrow desktop viewport.
`hasTouch`	Indicates that touch input is available.	Use it for pages whose presentation or interaction depends on touch capability.
`deviceScaleFactor`	Sets the emulated device pixel ratio.	Use a higher factor when you need a denser, retina-style output. It can increase image dimensions and file size.
Playwright device preset	Applies a bundle of device emulation settings.	Use a documented preset when you want its supplied configuration. Confirm the preset is compatible with the context options you set.
`fullPage`	Captures beyond the current visible viewport.	Set `true` only when you need a full-document image rather than a viewport screenshot.

Keep the viewport dimensions and device settings fixed when comparing screenshots over time. Changing either can alter responsive breakpoints, text wrapping, and the resulting image dimensions.

4. Wait for the page before capturing

Choose a navigation wait condition that fits the site. networkidle can be useful for pages that finish their network activity, but analytics, polling, or other ongoing requests can prevent a page from becoming idle. If that happens, wait for a specific page element or use an explicit delay appropriate to the site before taking the screenshot.

For lazy-loaded content, scroll through the relevant area before capture and allow images or other content to load. A normal viewport capture only shows the currently visible region; it does not promise that content below the fold has loaded.

5. Emulation limits and browser coverage

A mobile viewport is useful for checking responsive layout and many browser-rendered states. It does not reproduce every property of a real phone, including physical hardware and mobile operating-system behavior. Chrome Developers makes the same general distinction for its device mode: emulation approximates a mobile experience but does not run the code on an actual mobile device. That Chrome documentation describes Chrome DevTools, not BrowserCat’s implementation.

BrowserCat’s reviewed browser-type documentation describes sessions as Chromium-based, with Firefox and WebKit listed as coming soon. Do not treat a BrowserCat mobile screenshot as proof that the page renders identically in Safari or other browser engines. For browser-specific issues, test the relevant browser and, when hardware behavior matters, an actual device.

6. Common problems and fixes

Problem	Likely cause	What to try
The screenshot has a desktop layout.	The page was captured without the intended viewport or mobile-emulation context.	Set the viewport when creating the context. Add `isMobile` and `hasTouch` where the page needs those mobile signals.
The image is only the visible screen, not the whole page.	`page.screenshot()` captures the current viewport by default.	Use `page.screenshot({ path: 'full.png', fullPage: true })` when a full-page image is the goal.
The screenshot is blank or incomplete.	Navigation or client-rendered content may not have finished before capture.	Wait for a meaningful selector or the site’s relevant content to appear. Check navigation errors and timeouts.
Navigation waits indefinitely for network idle.	The page may keep requests open or make recurring requests.	Use a selector-based wait or a bounded delay instead of relying on network idle for that page.
Images below the fold are missing.	Lazy-loaded content may not have been requested because it was never brought into view.	Scroll through the required areas, wait for their images to load, then capture. Use full-page mode if the deliverable should include the entire page.
The connection fails before navigation.	The endpoint connection or account-specific configuration may be incomplete or incorrect.	Compare the connection setup with BrowserCat’s current quick-start and Playwright connection documentation, including any authentication requirements for your account.

7. Performance, reliability, and cost considerations

Capture time depends on connecting to the managed browser, loading the target page, waiting for the chosen readiness condition, and producing the image. Avoid waiting for a condition the page never reaches. A fixed viewport screenshot is generally a smaller capture task than a full-page image, while increasing the device scale factor can increase output dimensions and file size.

For repeatable results, keep the URL, viewport, emulation settings, wait strategy, and page state consistent. Dynamic content, personalization, delayed assets, and changing network responses can make two captures differ. BrowserCat’s cited documentation establishes the workflow and browser availability, but does not provide pricing or performance figures in the research for this article; check BrowserCat’s current product information for those details.

8. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. A GET request can return a PNG, JPEG, WebP, or PDF. For a mobile-sized capture, pass a viewport option using the parameter names documented in its 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

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, and paid plans start at $5 for 3,000 screenshots.

9. Frequently asked questions

Does BrowserCat take screenshots from a real phone?

The cited workflow documents browser-based mobile emulation. It does not establish physical-phone capture.

Should I use a device preset or set the options myself?

Use a preset when its bundled settings match your target. Set the viewport and mobile options directly when you need explicit control over those values.

Does a mobile viewport screenshot include the full page?

No. It captures the visible viewport unless you request a full-page screenshot.

Can this confirm Safari rendering?

No. The reviewed BrowserCat documentation describes Chromium-based sessions. Use the browser and device you need to validate for browser-specific results.