How to Take a Full-Page Mobile Screenshot of a Website with Sticky Headers

Quick answer: In Chrome on a computer, open DevTools, enable the device toolbar, choose a phone-sized viewport, reload the page, then open the toolbar’s More options menu and select Capture a full size screenshot. Inspect the saved image from top to bottom: fixed or sticky headers can repeat or cover content in stitched captures, and cookie banners, chat bubbles, lazy images, or nested scrolling panels can affect the result.

1. Capture the full page in a mobile layout with Chrome

1. Open the website in Chrome on your computer.
2. Open DevTools using More tools → Developer tools, or the browser’s DevTools keyboard shortcut.
3. Turn on the device toolbar. Choose a phone preset or enter the intended mobile viewport dimensions.
4. Reload the page after setting the viewport so the site can respond to the mobile dimensions.
5. In the device toolbar, open More options and choose Capture a full size screenshot.
6. Open the resulting image and inspect the entire page, especially transitions between sections and places where the header stays fixed.

Chrome describes device mode as a set of features for simulating mobile devices. Its full-size screenshot command captures content outside the visible viewport. This is a desktop emulation workflow; it does not establish that the output will be pixel-for-pixel identical to a physical phone.

Chrome’s documented instruction is: “To capture a screenshot of the whole page including the content that isn’t currently visible in the viewport, select Capture a full size screenshot from the same menu.” Chrome DevTools: Simulate mobile devices with device mode.

2. Why sticky headers can repeat or hide content

A full-page capture must represent content that extends beyond one screen. Some capture approaches take multiple viewport images and join them. A fixed element remains associated with the layout viewport as the page scrolls, so a header may appear in more than one segment or cover content in the final image. Sticky elements can also change behavior as they reach their scroll threshold.

Chrome’s full-size command is the simplest first attempt. If the output still repeats or obscures the header, inspect the image before relying on it. A browser-extension publisher describes a scrolling workflow that captures the header at the top and hides it during later scrolling, but that is the publisher’s claim and has not been independently verified in this research. Chrome device mode documentation · Extension publisher listing.

3. Inspect the screenshot for common capture problems

• Repeated header: Look for the same fixed or sticky header appearing at section boundaries. Try the browser’s full-size command first; if it persists, use a capture workflow that explicitly handles sticky elements and review its output.
• Header covers page text: Check whether content begins underneath a fixed header or whether the header overlays the page while scrolling. A screenshot may faithfully show that overlap, but it can make the underlying content unreadable.
• Cookie banner, newsletter popup, or chat bubble: These overlays can obscure the page. Dismiss them before capture if you need a clean content image, while noting that dismissal changes what is shown compared with a first visit.
• Missing images or late content: Wait for the page and its images to load before capturing. Some images load only when scrolled into view, so compare the full image with the actual page.
• Nested scrolling panel: If a section scrolls inside its own panel, a full-page capture of the document may not include all of that panel’s content. The Chrome documentation does not promise that its full-size command captures nested scrollers. Use a tool that supports the inner panel or capture that panel separately.
• Wrong mobile layout: Confirm the viewport dimensions and reload. Device emulation is useful for responsive layouts, but it is not a guarantee of exact physical-device rendering.

4. Choosing a capture method

Method	Where it runs	Mobile layout	Beyond visible screen	Sticky and nested content
Chrome DevTools device mode	Computer	Simulates chosen mobile dimensions	Yes, with Capture a full size screenshot	Inspect for repeated headers; nested panel behavior is not promised in the cited docs
Scrolling-capture extension	Computer browser	Depends on extension and setup	Workflow-dependent	One publisher says its tool hides repeated sticky headers and captures inner scrollers; verify the result
Phone-native screenshot	Physical phone	Actual device layout	Depends on device, OS, browser, and available capture options	Exact current steps and output formats were not confirmed in the research for this article

For a straightforward mobile-layout image, start with Chrome DevTools. Choose another workflow when you need a physical-device result, a particular sticky-header treatment, or a nested panel that the built-in full-page command does not capture as needed.

5. Troubleshooting

Symptom	Likely cause	What to do
The screenshot shows only the visible screen	The viewport screenshot command was used instead of the full-size command	Open the device toolbar’s More options menu and select Capture a full size screenshot.
The page still looks like desktop	The page was not reloaded after changing dimensions, or its layout does not respond to the selected viewport	Reload with device mode active, check the selected dimensions, and verify the site’s responsive behavior.
The header appears several times	The capture process may be stitching scroll positions while a fixed element remains visible	Inspect section boundaries. Try a workflow that explicitly handles sticky elements, then verify that it preserves the page content.
Part of a long panel is missing	The panel scrolls independently inside the document	Capture the panel separately or use a method that supports nested scrolling containers.
Images are blank or absent	Lazy loading or delayed page rendering	Allow the page to finish loading and scroll through it before capture if necessary; inspect whether the image appears in the live page.
A banner or chat control obscures content	An overlay is present in the page	Dismiss or remove the overlay when appropriate, or use a capture option that can hide selected elements.

6. Performance, reliability, and cost

Chrome DevTools is a convenient starting point because the workflow is built into the browser and requires no separate capture service. Capture time and output size depend on page length, content, and rendering; this research identifies no benchmark or fixed time. Very long pages and pages with extensive dynamic content warrant a careful review of the exported image.

For reliable results, set the intended mobile dimensions before reloading, allow content to render, and inspect the full output. Emulated dimensions do not prove how a specific physical phone or browser version will render the page. No named statistic or universal cost figure is available for this workflow.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request can return a screenshot or PDF. This example captures a full-page screenshot of a website in a mobile viewport; see the ScreenshotNeo API documentation for available parameters, including full-page capture and viewport settings.

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

Equivalent Python request:

import requests

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

Equivalent Node.js request:

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://stripe.com',
  full_page: 'true',
  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 Bun.write('mobile-page.webp', new Uint8Array(await res.arrayBuffer()));

Replace the sample target URL and dimensions with your page and intended mobile viewport. ScreenshotNeo can accept a visitor-style consent banner and remove 60+ known consent platforms, newsletter popups, and chat widgets before capture; each such step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, and response headers identify the page verdict and whether the request was billed. 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 shots per month with no card; paid plans start at $5 for 3,000 shots. See the docs for parameters and setup, then get 1,000 screenshots a month free with no card.

7. Frequently asked questions

Does a full-page screenshot show content below the mobile screen?

Yes. Chrome’s Capture a full size screenshot command is documented to include page content outside the currently visible viewport.

Will Chrome emulate my exact phone?

Device mode simulates mobile dimensions and related device features. It should not be treated as proof of pixel-for-pixel equivalence with a physical phone.

Can I capture an entire inner scrolling panel with the built-in command?

The cited Chrome documentation does not promise nested-panel capture. If the panel has its own scrollbar, inspect the result and capture the panel separately if needed.

Can I take the screenshot directly on an iPhone or Android phone?

Phone-native capture depends on the device, OS, and browser. Exact current steps and output formats were not confirmed in the research for this guide, so consult the instructions for your specific device and version.