How to Capture a Website Screenshot at Vivo V30 Screen Size in Chrome DevTools

To capture a website screenshot at Vivo V30 screen size in Chrome DevTools, open the page, enable the device toolbar, choose Responsive, and enter the viewport width and height you want to emulate. Then use Capture screenshot for the visible viewport or Capture a full size screenshot for the whole page.

Vivo lists the V30 display as 2800 × 1260 pixels and 6.78 inches. That is the panel’s physical resolution, not a verified CSS viewport or device-pixel-ratio (DPR) profile for Chrome. The available sources do not establish the V30’s browser viewport dimensions or DPR, so entering 2800 × 1260 does not reproduce its browser rendering exactly. Vivo’s V30 specifications and Chrome’s Device Mode documentation describe the relevant limits.

1. Set a Vivo V30-sized viewport in Chrome DevTools

1. Open the website in Chrome.
2. Open DevTools: use the Chrome menu under More tools > Developer tools, or the keyboard shortcut for your operating system.
3. Click Toggle device toolbar in the DevTools action bar. Device mode opens in Responsive mode by default.
4. In the device toolbar’s Dimensions controls, select Responsive and enter the width and height you want to test, in CSS pixels.
5. If you want mobile input behavior, open the Device Type menu and choose Mobile. This controls the emulated device behavior; it does not change the fact that the dimensions are your chosen CSS viewport.
6. To capture only what is currently visible, open the device toolbar’s More options menu and choose Capture screenshot.
7. To capture content beyond the viewport, choose Capture a full size screenshot.

Chrome documents these controls and describes Device mode as an approximation of mobile display and behavior. It does not run the page on a Vivo V30.

2. Choose dimensions carefully: panel pixels are not CSS pixels

A screen’s physical pixel count and the browser’s logical CSS viewport are different measurements. DPR expresses the relationship between hardware-screen pixels and logical CSS pixels. Since the sources here do not provide a verified Vivo V30 CSS viewport or DPR, there is no evidence-based exact width-and-height pair to enter for a 1:1 emulation.

• For a layout check: enter the CSS width and height that your design needs to support. Treat it as a responsive breakpoint test, not a claim that it exactly matches the V30 browser viewport.
• For a device profile you can reuse: use the device list’s Edit control or DevTools Settings > Devices to add a custom device. Enter the chosen width and height; DPR, user agent, and device type are optional fields.
• For DPR-specific rendering: in More options, choose Add device pixel ratio, then select a DPR only if you have a verified value to match. Do not derive a DPR from the V30’s 2800 × 1260 panel resolution alone.
• For actual V30 behavior: test on the phone. Chrome recommends remote debugging when you need to inspect a page on a physical device.

Device emulation is useful for repeatable responsive checks, but it cannot establish how the page behaves on the physical phone. Differences can come from the real browser viewport, DPR, browser version, device settings, or mobile input and rendering behavior.

3. Capture the visible viewport or the full page

DevTools action	What it captures	Use it for
Capture screenshot	The currently visible emulated viewport	Checking the initial mobile view or a specific scroll position
Capture a full size screenshot	The page beyond the viewport as a full-page image	Reviewing a long page in one capture

For a particular section farther down the page, scroll it into view before taking a regular screenshot. A full-size capture is a different scope: it includes off-screen page content rather than just the current viewport.

4. Troubleshooting common capture issues

Symptom	Likely cause	Fix
The page does not look like it is at the V30’s native resolution.	The published 2800 × 1260 figure is the physical panel resolution, not a verified browser CSS viewport.	Enter the CSS dimensions you intend to test. For exact behavior, inspect the page on a V30 using remote debugging.
The layout looks desktop-like despite the narrow dimensions.	The page may use desktop-oriented behavior, or the emulation mode may not match the input behavior you need.	Check the viewport values and select Mobile from Device Type when mobile behavior matters. Inspect the site’s responsive CSS and viewport setup.
The screenshot misses content lower on the page.	Capture screenshot saves the visible viewport only.	Use Capture a full size screenshot for the full page, or scroll to the desired section and take a viewport capture.
Text or images appear at an unexpected scale.	DPR or other browser rendering differences may affect the result; a guessed DPR is not a verified V30 setting.	Use a known DPR if one is available, or validate the appearance on the physical phone.
The custom profile is missing from the device list.	The profile may not have been added or saved in the device editor.	Open the device list’s Edit control or DevTools Settings > Devices, add the profile, and check its saved width and height.

5. Performance, repeatability, and practical limits

For a quick visual check, a viewport screenshot captures less page content than a full-size screenshot. Full-page captures can take longer on long or dynamic pages and are more likely to expose page-loading changes that happen as you scroll. If a result matters, wait for the page to settle and repeat the capture after confirming the content is present.

• Keep the selected width, height, device type, and DPR consistent when comparing screenshots.
• Use a named custom device profile if you repeatedly need the same chosen dimensions.
• Do not treat Device mode as a substitute for testing on the physical phone when exact rendering or interaction matters.
• DevTools is part of Chrome; this workflow does not require a screenshot API account or per-capture service charge.

6. Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. Its one-call API can return a screenshot; check the ScreenshotNeo API documentation for supported parameters. For repeatable tests, use a viewport you have chosen for your layout; this does not imply a verified Vivo-specific CSS profile.

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 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 not billed, and response headers report the page verdict and billing status. Its MCP server provides screenshot tools for AI agents, including 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.

Create a free ScreenshotNeo account to get 1,000 screenshots a month without a card.

7. FAQ

Does entering 2800 × 1260 reproduce the Vivo V30 screen in Chrome?

No. Those are the published physical panel dimensions. The available sources do not establish the V30’s Chrome CSS viewport or DPR.

Which screenshot option should I use for a mobile viewport?

Use Capture screenshot for the visible viewport. Choose Capture a full size screenshot when the image should include the page beyond that viewport.

Can DevTools confirm that a page works on the actual phone?

No. Device mode approximates mobile display and behavior. Use the physical phone with Chrome remote debugging for on-device inspection.