To capture a site at a OnePlus phone’s responsive layout size, match the phone’s browser viewport in CSS pixels—not its advertised hardware resolution. In Chrome on a computer, open DevTools’ device toolbar, enter the target model’s viewport width and height, and set device pixel ratio (DPR) and mobile mode if needed. For a capture that reflects the actual phone, take the screenshot on that OnePlus handset.
Emulate a OnePlus viewport with Chrome DevTools
-
Open the website in Chrome on your computer, then open DevTools.
# Preview Product Price 1 
OnePlus Open Dual SIM, 512GB + 16GB RAM, Voyager Black - Unlocked (Renewed) $1,069.99 Buy on Amazon As an Amazon Associate I earn from qualifying purchases.
-
Turn on the device toolbar. Chrome starts in Responsive mode, where you can enter custom viewport dimensions.
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Enter the target OnePlus model’s browser viewport width and height in CSS pixels. Do not substitute the phone’s physical display resolution.
-
If your test requires it, configure DPR and select a mobile device type. A custom device can also use a specified user-agent string.
-
Open More options in the device toolbar and choose Capture screenshot for the visible viewport or Capture full size screenshot for the whole page.
Chrome describes Device Mode as “a first-order approximation” of how a page looks and feels on a mobile device: desktop code is simulating a device, not reproducing every hardware and browser behavior. Use a real OnePlus phone when those differences matter. Chrome DevTools documentation
Choose the right dimensions: CSS viewport, physical pixels and DPR
These values are related but not interchangeable:
-
Physical resolution is the number of hardware pixels in the display.
-
CSS viewport dimensions are the logical width and height the browser exposes for page layout. Responsive CSS breakpoints respond to this viewport.
-
DPR is the ratio between hardware pixels and logical CSS pixels. It affects how CSS pixels are drawn on a high-density screen, but does not by itself determine viewport width.
Android’s web guidance explains that a page’s available viewport can differ from the physical display dimensions. It also discusses wide-viewport behavior of about 980 CSS pixels in the documented Android-browser context; that is not a OnePlus-specific measurement or a reliable substitute for the target phone’s live dimensions. Android Developers: Support different screens in web apps
There is no single established OnePlus viewport width, height or DPR that applies to every model. The exact values depend on the model and its browser and display settings. To match a particular phone, inspect its live browser dimensions or consult a trusted specification for that model, then enter those CSS viewport dimensions and DPR in DevTools.
Capture directly on the OnePlus phone
A handset screenshot reflects the installed browser, software and settings more directly than desktop emulation. The OnePlus manual for its documented Android 12 system software describes pressing and holding Power + Volume Down to take a screenshot. It also documents optional three-finger screenshots under Settings > System settings > Screenshot.
For a scrolling screenshot, the manual describes dragging down from the screenshot preview or using its scrolling-screenshot control. These instructions are version-specific: menu names, gesture support and controls can vary between OnePlus models and OxygenOS versions. OnePlus Android 12 system manual
Pick viewport or full-page capture
-
Viewport capture: records only what is currently visible in the emulated or physical browser viewport. Use it to check a specific screen-sized layout.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
Full-page capture: includes content beyond the visible viewport. In DevTools, choose Capture full size screenshot when you need the entire page rather than just the current screen.
DevTools is convenient for repeatable dimensions and full-page captures. The handset is the better choice when the test depends on actual device or browser behavior.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
ScreenshotNeo can capture a URL with one GET request. It accepts the target URL and returns an image or PDF; see the ScreenshotNeo API documentation for request options.
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes cookie banners, newsletter popups and chat widgets before capture; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads and cache hits are not billed, and response headers identify the page verdict and billing status. An MCP server lets AI agents use screenshot tools. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. See ScreenshotNeo for details, or sign up free for 1,000 screenshots a month with no card.
Free tools Windows power users keep installed
One-click scans. No signup required.
Troubleshooting
-
The layout does not match the OnePlus screen: check that you entered the browser’s CSS viewport dimensions, not the display’s hardware resolution. Confirm DPR and mobile device type too, if they are relevant to the test.
-
A responsive breakpoint triggers at the wrong width: verify the viewport width in CSS pixels. DPR changes the mapping between CSS and hardware pixels; it is not a replacement for viewport width.
-
The screenshot differs from what the phone displays: DevTools is an approximation. Capture on the actual handset to account for its browser, software and settings.
-
The result cuts off content below the fold: use DevTools’ Capture full size screenshot rather than the viewport-only capture.
Recommended Free Tools
Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy. -
The OnePlus screenshot gesture or menu is missing: the cited manual covers its documented Android 12 system software. Check the target model’s current OxygenOS settings and manual for the available controls.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
