How to Capture Website Screenshots at 360 by 800 Mobile Resolution

To capture a website at 360 × 800 mobile resolution, set the browser viewport to 360 CSS pixels wide and 800 CSS pixels high, then capture the visible viewport. In Chrome, use DevTools Device Toolbar in Responsive mode. For repeatable automated screenshots, set the viewport in Playwright before navigating and call its screenshot API.

First decide what “360 × 800” describes: the browser’s CSS-pixel viewport or the saved image’s bitmap dimensions. A device scale setting can make the bitmap larger while the emulated viewport remains 360 × 800 CSS pixels. Also decide whether you need just the visible viewport or the entire scrollable page.

1. Capture a 360 × 800 screenshot in Chrome DevTools

1. Open the page in desktop Chrome, then open DevTools.
2. Toggle the Device Toolbar.
3. Choose Responsive mode and enter 360 for width and 800 for height.
4. Wait for the layout and any viewport-dependent content to settle.
5. Open More options and choose Capture screenshot for the visible viewport. Choose Capture a full size screenshot if you need content below the viewport.

These dimensions set the emulated viewport; they do not reproduce every property of a physical phone. Chrome describes Device Mode as a first-order approximation of the mobile experience. For device-specific behavior, validate on an actual phone, such as through remote debugging. See Chrome’s Device Mode documentation.

2. Automate the capture with Playwright

Set the viewport before navigation so the page’s initial responsive layout is based on the requested dimensions. This runnable Node.js example captures the visible viewport and writes a PNG file.

import { chromium } from 'playwright';

const browser = await chromium.launch();
const page = await browser.newPage({
  viewport: { width: 360, height: 800 },
});

await page.goto('https://example.com', { waitUntil: 'load' });
await page.screenshot({ path: 'screenshot-360x800.png' });

await browser.close();

Install Playwright in your project with npm install playwright, then run the script with Node.js. For a page that loads content after the initial load event, wait for a meaningful selector or a short, deliberate delay before taking the screenshot. Avoid assuming that every site becomes visually complete at the same lifecycle event.

Playwright’s normal screenshot captures the current viewport. To capture the full scrollable document instead, change the screenshot call to:

await page.screenshot({ path: 'full-page.png', fullPage: true });

A full-page image is taller than 800 pixels when the document extends below the viewport. Playwright also supports device emulation properties such as screen size, user agent, and touch behavior. Add them only when they matter to the scenario; viewport dimensions alone do not establish how a physical handset behaves. Consult Playwright’s emulation guide and Page API for the relevant options.

3. Choose the right output dimensions and capture scope

Choice	What it means	Use it when
Viewport screenshot	The visible browser area is 360 × 800 CSS pixels.	You need a mobile-sized preview, visual comparison, or screenshot of the initial screen.
Full-page screenshot	The screenshot extends below the 800-pixel viewport to cover scrollable content.	You need the whole document in one image.
CSS pixels	The dimensions used by the emulated page layout.	You are describing responsive behavior or matching a CSS viewport.
Bitmap pixels	The actual width and height of the saved image file.	You need a specific image size for a downstream system or asset.

Playwright’s screenshot scale option controls how CSS pixels map to output bitmap pixels. With scale: 'css', output pixels correspond to CSS pixels; with the device scale setting, the output can contain more pixels. Check the saved image’s dimensions if the bitmap itself must be exactly 360 × 800. A full-page screenshot cannot also be exactly 800 pixels high unless the document fits within that height or you crop it afterward. See the Playwright screenshot API.

4. Common problems and fixes

Problem	Likely cause	Fix
The saved image is not 360 pixels wide.	Device scale changed bitmap dimensions, or the wrong viewport was set.	Confirm the viewport is 360 CSS pixels and check the screenshot scale and saved bitmap dimensions.
The image is taller than 800 pixels.	Full-page capture includes content below the viewport.	Use a viewport screenshot, or crop the full-page image if you need a fixed-height asset.
The page looks like desktop layout.	The viewport was changed after navigation, or the browser window is not in Responsive mode.	Set dimensions before navigation in Playwright; in DevTools, verify Responsive mode and the entered width.
Images or content are missing.	Lazy loading or client-side rendering has not finished.	Wait for a page-specific selector or content state before capture; for manual work, allow the page to settle.
The screenshot differs from a real phone.	Desktop emulation does not reproduce all hardware, browser, font, or network behavior.	Use emulation for repeatable layout checks and validate device-specific behavior on actual hardware.
Playwright cannot navigate to the page.	The URL is unavailable to the runner, navigation failed, or the site responds differently to automation.	Check the URL and network access, inspect the navigation error, and use a wait condition appropriate to the page rather than an arbitrary long timeout.

5. Performance, reliability, and cost

For a single capture, Chrome DevTools avoids writing automation code. Playwright is more repeatable for batches, scheduled captures, and visual regression workflows because the viewport and capture steps are explicit. Set the viewport before navigation, avoid waiting for conditions the page never reaches, and wait only for the content your screenshot needs.

Desktop emulation is useful for checking a responsive layout, but it is not evidence that a page works identically on a phone. If the result will inform a device-specific release decision, include an actual-device check. The research sources do not provide a general benchmark or failure rate for either approach, so capture time and reliability depend on the target page and environment.

DevTools and Playwright are browser-based workflows. Playwright requires a browser runtime and project setup; a one-off DevTools capture has no automation dependency. Consider the maintenance cost of browser setup against the repeatability you need.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its API accepts a URL and can return a screenshot or PDF. For a 360 × 800 viewport, pass the viewport options supported by the API; see the ScreenshotNeo API documentation for parameter names and output options.

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

Use the API’s viewport parameters to request the desired 360 × 800 capture. Cookie banners, newsletter popups, and chat widgets are removed before the shot, and each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed; response headers report the page verdict and billing status. An MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Sign up free for 1,000 screenshots a month, with no card required.

Frequently asked questions

Does 360 × 800 mean an iPhone screenshot?

No. It specifies viewport dimensions. It does not identify a particular phone model or reproduce all physical device properties.

Should I set screen size as well as viewport size?

Only when the emulated scenario requires it. For a straightforward responsive screenshot, setting the viewport is the key step. Add screen, touch, or user-agent settings when the page behavior depends on them.

Can I use the screenshot to prove a page works on mobile?

It can document how the page renders under the chosen emulation. Use a real device when the claim depends on actual hardware or mobile browser behavior.

Sources

• Chrome for Developers: Simulate mobile devices with Device Mode
• Playwright: Emulation
• Chrome DevTools Protocol: Emulation
• Playwright: Page API