How to Capture a Mobile Website Screenshot Without a Physical Phone

You can capture a website in mobile view without owning a phone by using Chrome DevTools Device Mode on a desktop. Open the page, enable the device toolbar, choose a device preset or set a responsive viewport, then use More options → Capture screenshot. Choose Capture a full size screenshot when you need the entire page rather than the visible screen.

This is a desktop browser emulating mobile conditions, not a screenshot taken on physical phone hardware. For repeated captures, Playwright can automate viewport and device settings. For actual device and browser behavior, validate on real devices or a device testing service.

1. Capture a mobile view with Chrome DevTools

Step-by-step

Open the website in desktop Chrome.
Open DevTools. You can right-click the page and choose Inspect.
Click Toggle device toolbar in DevTools.
Use the device selector to choose Responsive for custom dimensions, or choose a device preset.
Set the viewport width and height. Check both portrait and landscape if you need both orientations.
Open the device toolbar’s More options menu and select Capture screenshot for the visible viewport.
Select Capture a full size screenshot to include content below the viewport.

Chrome also exposes media-query breakpoints and can show a device frame for supported presets. The exact menu placement or labels can vary by Chrome version; if you do not see the options, check the installed version’s DevTools interface.

Choose the right capture size

Capture	Use it when
Visible viewport	You need the initial screen or a specific above-the-fold state at a chosen size.
Full size	You need one image of a long page, including content below the current viewport.

Before capturing, wait for the page to finish loading and for any content you need to appear. A screenshot records the page state at that moment; it does not guarantee that delayed or interaction-dependent content has loaded.

2. Automate repeatable mobile screenshots with Playwright

For recurring captures, visual checks, or several viewport configurations, a scriptable browser workflow avoids repeating the DevTools steps manually. Playwright provides device profiles and screenshot options. A device profile represents settings such as user agent, screen size, viewport, and touch capability; you can override profile values when you need a particular viewport.

Runnable Node.js example

Install Playwright and its Chromium browser, then save this as mobile-shot.js. The example uses a named device profile, navigates to the target page, and saves a full-page PNG.

npm init -y
npm install playwright
npx playwright install chromium

// mobile-shot.js
const { chromium, devices } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({ ...devices['iPhone 13'] });
  const page = await context.newPage();

  try {
    await page.goto('https://example.com', {
      waitUntil: 'networkidle',
      timeout: 60000,
    });
    await page.screenshot({ path: 'mobile-full-page.png', fullPage: true });
  } finally {
    await browser.close();
  }
})();

Run it with node mobile-shot.js. Replace the example URL with the page you are allowed to capture. If your installed Playwright version does not include that exact device name, inspect the available profiles in the Playwright documentation and choose a supported one.

Use a custom viewport

When the exact width and height matter more than a preset, create a context with explicit emulation settings instead. These are CSS-pixel dimensions; device scale factor controls how many device pixels are used per CSS pixel in the output.

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

Use either a device profile or an explicit configuration chosen for your test case. When overriding a profile, keep the values internally consistent: viewport, screen dimensions, scale factor, touch, and mobile behavior can all affect layout or interaction.

Capture one element instead of the whole page

For a component-level review, wait for the target element and capture its bounding box:

const card = page.locator('.product-card').first();
await card.waitFor({ state: 'visible' });
await card.screenshot({ path: 'mobile-card.png' });

Change .product-card to a selector on the page. If the selector matches multiple elements, choose the intended one explicitly, as in the example’s first().

Screenshot options to consider

Need	Playwright setting or approach	Notes
Visible viewport	`page.screenshot()`	Captures the current viewport.
Entire scrollable page	`fullPage: true`	Produces a tall image; very long pages can use substantial memory.
One element	`locator.screenshot()`	Wait for the element to be visible first.
Image format	Screenshot path extension or screenshot options	PNG is a practical default; screenshot tooling supports image format selection.
Pixel density	`deviceScaleFactor`	Controls CSS-pixel to device-pixel scaling in emulated contexts.

3. Understand what mobile emulation tells you

Chrome describes Device Mode as a way to approximate how a page looks and performs on a mobile device. It is useful for inspecting responsive layout, but the page is still running in a desktop browser environment. Chrome notes that code is not actually running on a mobile device; differences such as mobile CPU architecture are not reproduced by desktop simulation.

So an emulated screenshot can show how a page lays out at a given viewport and emulated configuration. It cannot, on its own, establish how the page behaves across real phone hardware, browser engines, or network conditions. Treat emulation as an initial responsive check. When actual mobile behavior matters, validate on a real device or use a service that provides real browser and device testing, such as BrowserStack.

4. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request can return an image or PDF. For a mobile-sized capture, pass viewport dimensions; the API also supports device presets, retina scale, full-page capture, and other capture options. See the ScreenshotNeo API documentation for parameter details.

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

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={
        "access_key": "YOUR_API_KEY",
        "url": "https://stripe.com",
        "width": 390,
        "height": 844,
    },
    timeout=90,
)
r.raise_for_status()
with open("shot.webp", "wb") as f:
    f.write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com',
  width: '390',
  height: '844',
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer())));

ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before the shot; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are never billed, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.

5. Troubleshooting mobile screenshots

Problem	Likely cause	What to try
The page still looks like desktop	Device toolbar is off, or the page has not responded to the selected viewport.	Confirm the toolbar is enabled, set the intended width, and reload if the page only evaluates layout at startup.
The screenshot cuts off the page	You captured the visible viewport.	Choose the full-size capture command in DevTools or set `fullPage: true` in Playwright.
A lazy-loaded image is missing	The image loads only after scrolling or waiting.	Scroll the page or wait for the image to become visible before capture; then verify the image has loaded.
Playwright times out during navigation	The page may keep network connections open, or navigation is genuinely slow.	Try a different navigation wait condition such as `domcontentloaded`, then wait explicitly for the content you need. Keep a timeout appropriate to the site.
Output dimensions differ from expected	CSS viewport dimensions and device-pixel output scale are being confused.	Check viewport width and height separately from `deviceScaleFactor`; inspect the final image dimensions.
Automated capture differs from a real phone	Desktop emulation does not reproduce all hardware, browser, or network behavior.	Use an actual device or a real-device testing service for validation that depends on those factors.

6. Performance, reliability, and cost

One-off capture: DevTools is the shortest path and requires no script setup.
Repeated captures: Playwright is useful when you need the same pages captured at multiple viewport configurations or in ongoing visual checks. Browser startup and page loading add time, so reuse a browser process for batches where practical.
Full-page images: A very long page creates a large output image and can require more memory than a viewport capture. Prefer viewport or element screenshots when those answer the question.
Reliability: Wait for the specific content needed rather than assuming that navigation completion means every delayed widget or image is ready. For dynamic pages, use an explicit selector wait or a bounded delay.
Cost: DevTools and the Playwright workflow described here use local browser software; the dossier provides no service pricing for them. A real-device testing service may require separate setup. ScreenshotNeo has a free tier of 1,000 shots monthly and paid plans from $5 for 3,000; yearly billing gives two months free, and every feature is on every plan.

7. Frequently asked questions

Can I take a mobile website screenshot on a computer?

Yes. Chrome DevTools can emulate a mobile viewport and capture the visible screen or full page.

Does Device Mode prove a site works on an iPhone or Android phone?

No. It approximates mobile appearance in a desktop browser. Use real hardware or real-device testing when browser or hardware behavior is part of the requirement.

Should I use a device preset or Responsive mode?

Use a preset when you want its configured device parameters. Use Responsive mode when you need precise custom dimensions.

What is the simplest option for a single screenshot?

Chrome DevTools. For scheduled or repeated captures, use a scriptable workflow such as Playwright.