How to Capture a Mobile Homepage Screenshot

To capture a mobile homepage screenshot, open the site in desktop Chrome, turn on the Device Toolbar, choose a responsive viewport or device profile, then select Capture screenshot for the visible area or Capture a full size screenshot for the whole page. For repeatable captures, automate the browser with Playwright and configure the viewport to match your target. Chrome’s mobile mode simulates a mobile experience; use an actual phone when exact hardware behavior matters.

1. Choose viewport, full-page, or element capture

Pick the capture type based on what the screenshot needs to show:

Capture	Use it for	What it includes
Viewport	First-screen impression, hero/header review, or a bug report about what appeared without scrolling	The currently visible viewport
Full page	Design handoff or review of the homepage from top to bottom	Scrollable content below the fold
Element	A component-specific issue or comparison	One selected page element

There is no universally correct mobile width. Use the target dimensions specified by your design, QA issue, or publication brief. When comparing screenshots, reuse the same viewport, browser settings, page state, and capture type.

2. Capture a mobile homepage in Chrome DevTools

1. Open the homepage in desktop Chrome.
2. Open DevTools and enable the Device Toolbar (the device-shaped toggle, or use DevTools’ device toolbar shortcut).
3. In the dimensions control, choose Responsive and enter the requested width and height, or select a device profile.
4. Wait for the layout and any important images to load. Scroll or interact first if the page state you need depends on it.
5. Open the Device Toolbar’s More options menu.
6. Choose Capture screenshot for the viewport, or Capture a full size screenshot to include content below the fold.

The screenshot is saved by the browser. Device Mode is useful for checking responsive layout, but it does not run your code on a physical phone. Hardware, browser, and mobile-specific behavior can differ; validate on an actual device when those details matter. See Chrome’s Device Mode documentation.

3. Automate the capture with Playwright

Playwright is useful when you need repeatable screenshots in a script or project workflow. The following complete Node.js example creates a mobile-sized browser context, visits a homepage, and saves a viewport screenshot. Set FULL_PAGE=1 to capture the scrollable page.

import { chromium, devices } from 'playwright';

const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({
  ...devices['iPhone 13'],
  // Keep the device profile's viewport and scale factor.
});
const page = await context.newPage();

try {
  await page.goto('https://example.com', {
    waitUntil: 'domcontentloaded',
    timeout: 30_000,
  });
  await page.locator('h1').waitFor({ state: 'visible', timeout: 10_000 }).catch(() => {});

  await page.screenshot({
    path: 'homepage-mobile.png',
    fullPage: process.env.FULL_PAGE === '1',
  });
} finally {
  await browser.close();
}

Install Playwright in a Node project with npm install playwright, then install its browser with npx playwright install chromium. Run the example as an ES module, for example by saving it as capture.mjs and running node capture.mjs. Replace https://example.com with the homepage URL. The sample profile uses a documented Playwright device preset; choose the preset or custom viewport that matches your target.

Full-page, element, and higher-resolution options

• Viewport: omit fullPage or set it to false.
• Full page: set fullPage: true. Very long pages can produce large images and may expose lazy-loading behavior; check that below-the-fold content has loaded before capturing.
• One element: locate it and call locator.screenshot({ path: 'element.png' }), for example await page.locator('header').screenshot({ path: 'header.png' }). The locator must resolve to a visible element.
• Device scale: the browser context’s device scale factor affects raster pixel dimensions. A higher scale can produce a sharper, larger output; verify the resulting image dimensions rather than assuming CSS viewport dimensions equal output pixels.

Playwright’s Page API documents screenshot options, and its screenshots guide covers viewport, element, full-page, and high-resolution capture.

4. Make captures consistent and reliable

• Set the page state deliberately: use the same URL, viewport, device profile, color scheme, locale, and interaction state across comparison runs.
• Wait for meaningful content: navigation completion does not guarantee that every image or client-rendered component is ready. Wait for a stable selector that indicates the homepage is usable.
• Account for lazy images: full-page capture may encounter images loaded only as they approach the viewport. If they are missing, scroll through the page before capture or wait for the relevant image elements to finish loading.
• Choose a stable output format: PNG is useful when exact pixel detail matters. Keep the same output format and scale for comparisons.
• Remember what emulation means: a desktop browser’s mobile profile approximates the mobile experience. Check on a real device for behavior dependent on actual hardware or browser implementation.

5. Troubleshooting

Symptom	Likely cause	Fix
The screenshot looks like desktop	Device Toolbar was not enabled, or the viewport dimensions were not applied	Enable the toolbar, confirm the displayed dimensions, and reload if the page only adapts during initial load.
Only the first screen is present	A viewport screenshot was captured	In DevTools choose Capture a full size screenshot; in Playwright set fullPage: true.
Images are blank or missing lower on the page	Images are lazy-loaded or still downloading	Scroll through the page before capture, wait for the relevant image or selector, and then take the full-page screenshot.
Playwright times out during navigation	The site is slow, keeps network requests open, or the navigation timeout is too short	Use an appropriate timeout and wait for a page-specific ready selector instead of requiring every network connection to become idle.
An element screenshot fails	The selector matches no element, matches multiple elements, or the element is hidden	Use a selector that identifies one visible element and wait for it to appear before calling screenshot().
Output dimensions differ from expectations	Device scale factor changes raster dimensions relative to CSS pixels	Inspect the actual image dimensions and set the context scale factor or device preset consistently.
Desktop emulation differs from a phone	Device Mode simulates mobile behavior from a desktop	Verify on a physical device when exact mobile hardware behavior is part of the issue.

6. Performance, reliability, and cost

For a one-off check, DevTools avoids setting up an automation project. Playwright adds installation and browser startup, but lets a team reuse a script and capture the same dimensions repeatedly. Full-page images take more space than viewport images; higher device scale also increases pixel dimensions. Keep capture scope and scale limited to what the review needs, and use explicit waits for the content that matters.

Both workflows capture a page that can change due to network timing, personalization, consent state, or dynamic content. For dependable visual comparisons, control the page state and repeat the same capture settings. DevTools and Playwright are software workflows; no physical product is required. A screenshot API can be useful when you want a hosted request instead of maintaining a browser setup.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. One request can return a PNG, JPEG, WebP, or PDF. This example captures a mobile-sized homepage image; see the ScreenshotNeo API docs for the available parameters.

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,
)
open("shot.webp", "wb").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(({ writeFile }) => writeFile('shot.webp', Buffer.from(await res.arrayBuffer())));

Cookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed, and the response identifies the page verdict and billing status in headers. 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 shots. All features are available on every plan.

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

FAQ

Can I capture just the visible mobile homepage?

Yes. Use DevTools’ Capture screenshot or Playwright’s default page screenshot, which captures the current viewport.

Can I capture the entire homepage in one image?

Yes. Use DevTools’ Capture a full size screenshot or Playwright’s fullPage: true option.

Does a mobile screenshot in DevTools prove the page works on an iPhone or Android phone?

No. It checks a simulated mobile viewport. Test on the actual device when hardware-specific behavior matters.

Which viewport should I use?

Use the dimensions requested by your design or QA task. For meaningful before-and-after comparisons, record and reuse the same dimensions and capture settings.