How to Capture a Website Screenshot on Android with a Specific Viewport Height

To capture a website at a specific mobile viewport height, open it in desktop Chrome, enable DevTools Device Mode, choose Responsive, enter the desired width and height, then select More options > Capture screenshot. That captures the visible viewport. Choose Capture a full size screenshot only when you want the entire document beyond the viewport.

This method simulates a mobile browser; it does not run the page on Android hardware. If you need the page to run on a physical phone, use Chrome remote debugging. For repeatable scripted captures, use ChromeDriver mobile emulation or the DevTools Protocol. Chrome describes Device Mode as an approximation of a mobile device. Chrome DevTools: Simulate mobile devices with Device Mode.

Set a precise viewport height in desktop Chrome

Open the target website in Chrome on your computer.
Open DevTools, then click Toggle device toolbar (or use the DevTools device toolbar shortcut available on your platform).
In the device dimensions control, select Responsive.
Enter the viewport width and height, in pixels. Set both: responsive layout can change with width, and the same height at a different width may show a different page composition.
If appropriate, set Device Type to Mobile and configure the device pixel ratio (DPR). CSS pixels and physical image pixels are different: DPR affects the raster output size, while the viewport dimensions govern the page’s CSS layout.
Wait for the page and any viewport-dependent content to settle. Then open More options and select Capture screenshot.

The height field sets the emulated viewport available to the page. It does not constrain the document itself to that height. A viewport screenshot shows the visible area; a full-size screenshot extends through the page content outside that area. Chrome also provides rulers that can help set dimensions by pixel positions. See the Device Mode guide for the current controls and behavior.

Which screenshot command should you use?

Goal	Command	What it captures
Image bounded by your entered viewport width and height	Capture screenshot	The currently visible viewport
Image of the page beyond the visible screen	Capture a full size screenshot	The full page, including content outside the viewport

Choose emulation, a real phone, or automation

Need	Recommended approach	Tradeoff
One screenshot at a chosen mobile width and height	Chrome DevTools Responsive mode	Quick and dimension-controlled, but mobile behavior is simulated.
The page must run in Chrome on an actual Android phone	Chrome remote debugging	Inspects the live phone tab; requires USB debugging and a data-capable connection.
Repeat captures in a script or test workflow	ChromeDriver or DevTools Protocol emulation	Supports custom metrics and repeatability, with automation setup to maintain.
The entire document, not just the configured viewport	DevTools full-size screenshot	Output includes content beyond the visible viewport.

Choose based on device fidelity, setup effort, repeatability, and capture scope. Device Mode is suitable for layout checks at a known size. Remote debugging inspects the actual Android tab. Automation is useful when the same dimensions must be applied consistently across pages.

Capture from an actual Android phone

Use remote debugging when the page must execute on the phone itself—for example, when checking behavior tied to the real browser or device. Chrome’s documented workflow connects the phone to desktop Chrome and lets you inspect its live tab. It does not document a dedicated field for forcing an arbitrary CSS-pixel viewport height on the physical phone, so use desktop emulation or automated emulation when an exact repeatable test dimension is the priority.

On Android, enable Developer options and turn on USB debugging.
On the computer, open Chrome and visit chrome://inspect/#devices. Ensure USB device discovery is enabled.
Connect the phone directly to the computer with a USB cable that supports data. Approve the debugging prompt on the phone if it appears.
Open the target page in Chrome on the phone.
Find that tab in chrome://inspect/#devices and click Inspect next to its URL.
Use the remote DevTools window to inspect the live page. Chrome’s remote debugging documentation also describes screencasting page content to the computer.

If Chrome does not detect the phone, first verify that the cable can transfer data and that the computer can inspect files on the device. Connect directly instead of through a USB hub. On Windows, a device USB driver may also be needed. See Chrome’s Android remote debugging guide.

Automate captures with custom mobile metrics

ChromeDriver mobile emulation accepts custom device metrics such as width, height, and pixel ratio, along with mobile and touch behavior. You can specify individual metrics rather than choosing a named device preset. At the DevTools Protocol level, Emulation.setDeviceMetricsOverride overrides screen dimensions and viewport-related values, including device-width and device-height media query results.

The following Python example uses Selenium with ChromeDriver mobile emulation. Install Selenium and make a compatible ChromeDriver available to Selenium before running it. Set WIDTH, HEIGHT, and DPR to the dimensions you need. This saves a viewport screenshot, not a full-page image.

from selenium import webdriver
from selenium.webdriver.chrome.options import Options

WIDTH = 390
HEIGHT = 844
DPR = 1
URL = "https://example.com"

options = Options()
options.add_experimental_option("mobileEmulation", {
    "deviceMetrics": {
        "width": WIDTH,
        "height": HEIGHT,
        "pixelRatio": DPR,
        "touch": True,
    },
    "userAgent": "Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 "
                 "(KHTML, like Gecko) Chrome/131.0.0.0 Mobile Safari/537.36",
})

driver = webdriver.Chrome(options=options)
try:
    driver.set_window_size(WIDTH, HEIGHT)
    driver.get(URL)
    driver.save_screenshot("android-viewport.png")
finally:
    driver.quit()

The user agent in this example is a configurable emulation input, not a guarantee that the browser exactly matches a particular Android phone. For the most reliable device-specific validation, inspect the actual phone. ChromeDriver can also use named device presets; consult the ChromeDriver mobile emulation documentation for supported configuration details.

For a direct DevTools Protocol workflow, attach to a Chrome debugging session and issue this command before navigation or capture, replacing the values with the desired metrics:

{
  "method": "Emulation.setDeviceMetricsOverride",
  "params": {
    "width": 390,
    "height": 844,
    "deviceScaleFactor": 1,
    "mobile": true
  }
}

This is the protocol command shape, not a standalone client. Your CDP client must connect to a browser target, send the command through the protocol, navigate or wait for the page as needed, and capture a screenshot. Refer to the DevTools Protocol Emulation domain for command details.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server from ScreenshotNeo. One GET request returns an image or PDF. Here is the one-call cURL form; the API documentation lists the available parameters, including viewport configuration: ScreenshotNeo API docs.

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com \
  -o shot.webp

Cookie and consent banners are accepted before capture, and more than 60 known consent platforms, newsletter popups, and chat widgets are removed; each step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits cost nothing, with response headers indicating 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 per month with no card; paid plans start at $5 for 3,000 screenshots.

Options that affect the result

Width and height: Set both explicitly. A responsive breakpoint or wrapping change can alter the screenshot even if height stays constant.
Viewport versus full page: Use viewport capture for a bounded screen image. Full-page capture includes content beyond the viewport.
Device type and mobile behavior: Device Mode approximates mobile conditions. A real phone can differ in browser behavior, hardware, installed fonts, and available APIs.
DPR: Device pixel ratio changes the relationship between CSS pixels and output pixels. Record it when comparing captures.
Page readiness: Wait for content that loads after navigation, such as images or client-rendered sections, before saving the image.
Capture repeatability: Keep the URL, viewport width and height, DPR, browser version, and page state consistent when comparing runs.

Troubleshooting

Symptom	Likely cause	Fix
The image is taller than the requested height	You selected the full-size screenshot command.	Choose Capture screenshot to capture only the visible viewport.
The page layout does not match the phone	Device Mode is an approximation, or the selected width, device type, or DPR differs from the phone.	Match the width and DPR, select Mobile where appropriate, and inspect on a real device for device-specific behavior.
Content is missing from the screenshot	It had not loaded or rendered when capture occurred, or it appears only after scrolling or interaction.	Wait for the page to settle, trigger the required interaction, or use an automation flow that waits for the relevant content.
Remote debugging shows no device	USB debugging is off, the phone has not approved the session, or the cable is charge-only.	Enable debugging, approve the prompt, use a data cable, and check USB device discovery in `chrome://inspect/#devices`.
The phone still is not detected	A hub, USB driver, or connection issue may be interfering.	Connect directly to the computer; on Windows, check for the device’s USB driver.
Automated layout dimensions differ from expectations	Window size, emulated device metrics, DPR, or mobile setting was not applied consistently.	Set custom metrics explicitly and keep them fixed for each run; verify with a real device when exact hardware behavior matters.
A CDP screenshot uses desktop layout rules	Metrics may have been set without enabling mobile emulation, or the page was evaluated before the override took effect.	Apply the metrics override with the intended mobile setting before navigating or capturing, and check the protocol command’s result.

Performance, reliability, and cost

For one manual capture, Device Mode has the least setup. Remote debugging adds cable and device-discovery steps but runs the page on the phone. Automation takes more initial configuration and is useful when the same viewport must be reproduced across a set of URLs or repeated during development.

For reliable comparisons, use the same browser version, viewport width and height, DPR, URL, and page state. Dynamic content can vary between captures, so wait for the specific content you need rather than assuming navigation alone means the page is ready. The research sources do not provide timing benchmarks or cost figures for local Chrome capture; costs depend on your own hardware and workflow. ScreenshotNeo offers a free allowance and published paid tiers in its product information, but an API call is a different workflow from running Chrome locally.

FAQ

Does entering a height change the website’s actual page height?

No. It changes the emulated visible viewport. The document can continue below it, which is why Chrome offers a separate full-size screenshot command.

Can I force an exact viewport height on a physical Android phone through remote debugging?

The documented remote-debugging workflow inspects a live phone tab; it does not describe a dedicated control for forcing an arbitrary CSS-pixel height on the physical browser. Use desktop emulation or automation for a repeatable custom viewport.

Should I match the phone’s physical screen pixels?

For responsive layout, set CSS viewport dimensions and account for DPR separately. Physical screen pixels and CSS pixels are not interchangeable.

Is a named phone preset required for automated emulation?

No. ChromeDriver mobile emulation supports custom device metrics, including width, height, and pixel ratio.