How to Capture a Website Screenshot at Moto G84 Viewport Size

To capture a website at a Moto G84-like viewport size, use Chrome DevTools Device Mode, enter the CSS width and height you want to emulate, then choose a viewport screenshot or a full-size screenshot. Motorola specifies the Moto G84 5G display as 2400 × 1080 physical pixels in a 20:9 aspect ratio, but that does not establish the phone browser’s CSS viewport dimensions or device pixel ratio. Treat your DevTools dimensions as chosen emulation values, not verified Moto G84 browser measurements.

What “Moto G84 viewport size” means

A physical display’s pixel resolution and a browser’s CSS viewport are different measurements. Motorola lists the G84 display as 2400 × 1080, 402 ppi, and 20:9. Those specifications describe the panel; they do not tell you what CSS width and height the browser exposes to a page. The available official sources also do not establish a Moto G84-specific device pixel ratio.

For responsive layout review, the practical approach is to select explicit CSS dimensions in DevTools and record them with the screenshot. You can use the 20:9 ratio as a shape reference, but do not label 1080 × 2400 CSS pixels as the handset’s confirmed browser viewport.

Sources: Motorola Moto G84 specifications; Chrome DevTools Device Mode.

Capture a screenshot with Chrome DevTools

1. Open the page in Chrome, then open DevTools.
2. Turn on the device toolbar using the Toggle device toolbar control.
3. Set the width and height fields to your chosen CSS viewport dimensions. If you need portrait or landscape, set the dimensions accordingly or use the orientation control.
4. Wait for the page to finish rendering. Check that responsive content, fonts, and images have loaded.
5. Open the device toolbar’s More options menu. Choose Capture screenshot for the visible viewport, or Capture a full size screenshot for the full page, including content below the fold.
6. Keep the exact emulated width, height, orientation, and capture type with the image so the result can be reproduced.

Chrome Device Mode simulates a mobile experience from a desktop; it does not run the page on the phone itself. Chrome notes that some properties of actual mobile devices cannot be simulated. Use a physical Moto G84 when behavior on that specific handset matters. See Chrome’s Device Mode guide.

Add a custom device profile if needed

If the Moto G84 is not listed in the DevTools device menu, Chrome supports adding a custom device. Open DevTools settings, go to Devices, select Add custom device, enter the dimensions and other details you intend to emulate, save, and select the profile from the device list. Chrome’s documentation explains the custom-device workflow, but the sources here do not provide verified G84 CSS viewport or device-pixel-ratio values. Label your profile with the dimensions you chose rather than implying they are manufacturer-confirmed browser values.

See Chrome DevTools device settings.

Choose viewport-only or full-page capture

Capture	Use it for	What it includes
Capture screenshot	Checking a responsive breakpoint or the first screen	The currently visible emulated viewport
Capture a full size screenshot	Reviewing a long page or saving the complete page image	The page beyond the visible viewport

For a layout comparison, keep the viewport dimensions and orientation identical between captures. A full-page image is useful for content review, but it is not a record of a single physical phone screen because it extends below the viewport.

Capture on the actual Moto G84

When you need the actual handset’s rendering, open the site on the phone and press Power + Volume Down at the same time. Motorola also documents scrolling capture for longer content. This produces a screenshot on the device, which is a different workflow from capturing a desktop browser in DevTools. See Motorola’s screenshot instructions.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. It supports any viewport, but the supplied API example below does not specify Moto G84 dimensions. Use the ScreenshotNeo docs to set the viewport values you chose for your emulation; do not assume the phone’s CSS viewport from its panel resolution.

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

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and the response identifies the page verdict and billing status. Its MCP server provides screenshot tools for AI agents. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 shots. Create a free account.

Troubleshooting

Problem	Likely cause	What to do
The result does not match a Moto G84 browser exactly	Device Mode is an approximation, and the selected CSS dimensions may not match the handset’s browser viewport.	Record the emulated dimensions and validate on the actual phone when device-specific behavior matters.
The device list has no Moto G84	Chrome does not show a matching preset in the available list.	Add a custom device profile and enter explicitly chosen dimensions. Do not represent them as verified G84 CSS values.
The image shows only the top part of a long page	You captured the visible viewport.	Use Capture a full size screenshot from the More options menu.
Mobile navigation or layout does not appear	The viewport width may be too large, or the page may not have finished responding to the resize.	Check the width and height fields, wait for rendering, and reload at the chosen dimensions if needed.
Some behavior differs from the real handset	Desktop emulation cannot reproduce every mobile-device property.	Repeat the check on the physical G84.

Performance, reliability, and reproducibility

• Use the same explicit dimensions and orientation when comparing revisions; the G84 panel’s 20:9 ratio alone does not define the browser viewport.
• Wait for the page’s responsive layout and essential assets to settle before capture. Dynamic pages may change after the initial load.
• Choose viewport capture when the first-screen layout is the subject. Choose full-size capture for a complete page review.
• Use the actual phone to confirm device-specific rendering. DevTools is useful for repeatable layout checks, but remains an approximation.
• Keep a note of the CSS dimensions, orientation, URL, and capture mode alongside screenshots used in reviews or bug reports.

FAQ

Is 1080 × 2400 the Moto G84 CSS viewport?

No. Motorola specifies the physical display resolution as 2400 × 1080. The cited specification does not state the browser’s CSS viewport size.

Does Chrome provide a verified Moto G84 profile?

The cited Chrome documentation explains device profiles and custom devices, but does not establish a G84-specific profile or its CSS dimensions.

Should I use a full-page screenshot for a phone layout check?

Use a viewport capture to inspect what fits on one screen. Use a full-page capture when you need the entire document in one image.

How do I take the screenshot directly on the phone?

Motorola documents pressing Power and Volume Down together; its help page also describes scrolling capture.