How to Capture Responsive Website Screenshots at OnePlus 12 Screen Size

To capture a responsive website screenshot at OnePlus 12 screen size, use Chrome DevTools’ device toolbar and enter a CSS viewport width and height. The phone’s native display resolution is 3168 × 1440 physical pixels; it is not the browser’s CSS viewport. Published viewport references disagree, so treat either estimate as a starting preset and measure the actual handset if a precise match matters.

For a quick capture, try 412 × 905 CSS pixels at DPR 3.5 or 450 × 990 CSS pixels at DPR 3.2. These are competing third-party estimates, not official OnePlus browser viewport specifications. OnePlus publishes the display resolution, diagonal, and aspect ratio, but not a guaranteed CSS viewport. OnePlus 12 specifications; YesViz viewport reference; 1440px viewport reference.

Why the phone’s resolution is not its CSS viewport

The OnePlus 12 has a 3168 × 1440 native display, a 6.82-inch diagonal, and a 19.8:9 aspect ratio. Those figures describe the physical panel. A webpage lays out against a browser viewport in CSS pixels, and the relationship between CSS pixels and physical pixels depends in part on device pixel ratio (DPR). Browser chrome, orientation, display settings, and software can also affect the usable viewport.

That distinction is why dividing the panel dimensions by an assumed DPR does not establish the exact browser viewport. The available references differ: YesViz lists 412 × 905 at DPR 3.5, while 1440px lists 450 × 990 at DPR 3.2. Use one as an initial responsive test size, then read window.innerWidth, window.innerHeight, and window.devicePixelRatio on the target handset to record its current browser configuration.

Capture a OnePlus 12-sized screenshot in Chrome DevTools

Open the page you want to capture in Chrome on a desktop computer.
Open DevTools with F12 or Ctrl+Shift+I on Windows/Linux, or Cmd+Option+I on macOS.
Enable the device toolbar with the phone/tablet icon, or press Ctrl+Shift+M (Windows/Linux) or Cmd+Shift+M (macOS).
Choose Responsive from the device selector. Enter a width and height in CSS pixels. Start with either 412 by 905 or 450 by 990; do not treat the estimates as interchangeable guaranteed specifications.
Set the DPR if the toolbar exposes that control. Match the estimate you chose—3.5 for 412 × 905 or 3.2 for 450 × 990—when checking density-sensitive images or canvas output. For ordinary breakpoint layout checks, width and height are the main inputs.
Choose a mobile device type if you need mobile rendering or touch behavior. Responsive dimensions alone do not necessarily exercise the same mobile input behavior.
Open the DevTools More options menu. Choose Capture screenshot for the currently visible viewport, or Capture full size screenshot to include the entire page beyond the viewport.

To repeat the capture, configure the dimensions and device options once, then use the device selector’s option to save a custom device preset if available in your Chrome version. Chrome’s controls and menu labels may change; consult the Chrome device mode documentation if a control has moved.

Viewport or full-page capture?

Capture choice	What it includes	Use it for
Capture screenshot	The portion currently visible inside the emulated viewport	Checking the first screen, a responsive breakpoint, or a mobile composition
Capture full size screenshot	The page beyond the viewport, captured at the emulated page width	Reviewing long pages, full-page design, or content lower down the page

Full-page capture does not mean the phone displays the whole page at once. It creates a taller image of the page while retaining the emulated width.

Choose dimensions, DPR, and device type for the right reason

CSS width and height: These determine the available layout space and therefore which responsive CSS rules may apply. Test the viewport actually reported by the handset when exact breakpoint behavior matters.
DPR: This describes the relationship between CSS pixels and device pixels and can affect resolution-sensitive assets. It does not replace setting CSS dimensions.
Mobile device type: Use a mobile profile when touch behavior and mobile rendering are part of the test. A desktop responsive window is useful for layout, but it is an approximation of a phone.
Orientation: Portrait estimates above are not landscape settings. Rotate the phone or enter the measured landscape viewport separately; do not simply swap physical panel numbers into CSS fields.

Measure the live viewport when exactness matters

On the OnePlus 12, open the page in the browser configuration you intend to match, then use the browser’s developer tools or a small temporary diagnostic snippet to inspect the viewport:

console.table({
  width: window.innerWidth,
  height: window.innerHeight,
  devicePixelRatio: window.devicePixelRatio
});

Record the values with the browser, orientation, and relevant display settings. Then enter the measured width and height in DevTools Responsive mode and set the same DPR for density-sensitive checks. If the address bar or other browser chrome changes the visible area, measure in the state you need to reproduce.

Chrome describes Device Mode as an approximation: “Use device mode to approximate how your page looks and performs on a mobile device.” It does not run the page on the phone. Use the handset itself or remote debugging when device-specific behavior, browser UI interaction, or an exact result matters. Chrome for Developers: Simulate mobile devices with device mode.

Common mismatches and fixes

Symptom	Likely cause	What to check
Layout differs from the OnePlus 12	The selected estimate does not match the handset’s current CSS viewport, or a breakpoint lies near the chosen width	Measure `innerWidth` and `innerHeight` on the phone; try the measured width and nearby breakpoint widths
Images or canvas appear softer or different	DPR differs, or the site serves assets based on resolution	Compare `devicePixelRatio` and set the same DPR in the emulation profile
Only the top of the page appears	The visible-viewport capture mode was selected	Choose Capture full size screenshot, or scroll to the desired area before capturing the viewport
Touch interactions do not match	Layout emulation is being used without mobile device behavior, or desktop emulation is insufficient	Enable a mobile device type and validate the interaction on the handset
Viewport changes after rotating or browser controls move	Orientation or browser chrome changed the available area	Measure again in the same orientation and browser state you need to reproduce
A preset looks close but never exact	The published viewport figure is only a third-party reference and may reflect a different configuration	Use the live handset measurement; do not infer CSS size solely from 3168 × 1440 panel pixels

Performance, repeatability, and cost

Chrome DevTools is a direct, local workflow for a one-off capture and costs nothing beyond access to Chrome and the page. Keep the browser version, viewport, DPR, orientation, and capture mode consistent when comparing screenshots; otherwise a change in setup can look like a page regression. For repeatable checks across a team, document those settings alongside the screenshot.

Emulation is useful for responsive development, but it cannot establish that a page behaves identically on the physical phone. For device-specific validation, check the target handset. A physical OnePlus 12 is optional for the DevTools workflow; it is only needed when you want to measure or verify that actual device configuration.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server for developers. It can capture a URL as an image or PDF in one request. The API has viewport and device options; set a custom viewport to the measured OnePlus 12 CSS dimensions when you need that layout. See the ScreenshotNeo documentation for request options and current parameter names.

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}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
const fs = await import('node:fs/promises');
await fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

Cookie and consent banners are accepted before capture, and more than 60 known consent platforms, newsletter popups, and chat widgets can be removed; each step can be turned off.
Bot checks, CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing. Response headers report the page verdict and billing status.
An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients.
The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 screenshots. All features are available on every plan.

Learn about ScreenshotNeo, then sign up free for 1,000 screenshots a month, no card required.

FAQ

Which OnePlus 12 viewport should I enter?

There is no single manufacturer-published CSS viewport in the cited specifications. Use 412 × 905 at DPR 3.5 or 450 × 990 at DPR 3.2 as a provisional reference, and measure the actual phone when exactness matters.

Should I enter 3168 × 1440 in DevTools?

No. Those are native physical display pixels. DevTools’ responsive width and height should represent CSS viewport dimensions.

Can a DevTools screenshot prove the site works on a OnePlus 12?

No. It is an approximation for responsive development. Validate on the handset when the behavior depends on the actual device or browser.

Do I need to buy a OnePlus 12 to use DevTools?

No. DevTools can emulate a chosen viewport without the phone. The handset is useful for measuring its live viewport and checking real device behavior.