11 devices · Smartphones
OnePlus devices: CSS viewport, density, and screen resolution
Display characteristics of 11 referenced OnePlus devices, each with the width your media queries respond to, its pixel density, and panel resolution. 1 of these devices can be tested directly in your browser.
OnePlus Smartphones
1 distinct CSS widths cover the entire range: 412 px. Several models share the same: validating one of them is enough to validate the others.
| Model | CSS Viewport | Density | Panel resolution | Diagonal | Year |
|---|---|---|---|---|---|
| OnePlus Nord 2 | 412 × 915 | 2.625x | 1080 × 2400 | 6.4" | 2021 |
| OnePlus 8 | 412 × 915 | 2.625x | 1080 × 2400 | 6.6" | 2020 |
| OnePlus 8 Pro | 412 × 906 | 3.5x | 1440 × 3168 | 6.8" | 2020 |
| OnePlus 8T | 412 × 914 | 2.625x | 1080 × 2400 | 6.6" | 2020 |
| OnePlus Nord | 412 × 915 | 2.625x | 1080 × 2400 | 6.4" | 2020 |
| OnePlus 7 | 412 × 892 | 2.625x | 1080 × 2340 | 6.4" | 2019 |
| OnePlus 7 Pro | 412 × 892 | 3.5x | 1440 × 3120 | 6.7" | 2019 |
| OnePlus 7T | 412 × 914 | 2.625x | 1080 × 2400 | 6.6" | 2019 |
| OnePlus 7T Pro | 412 × 892 | 3.5x | 1440 × 3120 | 6.7" | 2019 |
| OnePlus 6 | 412 × 869 | 2.625x | 1080 × 2280 | 6.3" | 2018 |
| OnePlus 6T | 412 × 892 | 2.625x | 1080 × 2340 | 6.4" | 2018 |
Which widths to test first
The most represented widths in the range are 412 px. Checking them first covers 11 of the 11 referenced OnePlus models, and these should be your first breakpoints.
Go down to 412 px to cover the entire range, including OnePlus Nord 2: a layout that fits this width fits everywhere, including the oldest models still in circulation.
Watch out for height: mobile browsers reduce the visible area with their interface bars, and these retract when scrolling. A height of 100vh therefore overflows the first screen; svh and dvh units are preferable.
Test your site on 1 OnePlus devices, without buying a single one
The tables provide measurements. The extension displays your site at the model's exact viewport, with its density, User-Agent, and portrait or landscape switching.
- 1 OnePlus devices ready to use, from older models to this year's releases
- Screenshots and videos exported in the device's format
- Works on your local environments and pre-productions
Free · 4.9/5 on 5,100 reviews
1,500,000+ users
Other brands
Frequently asked questions
What is the most common CSS viewport for OnePlus?
412 x 915 px, shared by 11 of the 11 referenced models, including OnePlus Nord 2 and OnePlus 8. This is the width to check first in this range.
What minimum width to test to cover OnePlus devices?
412 px, the width of the narrowest model in the list, OnePlus Nord 2. If your layout fits at 412 px, it fits on the 11 OnePlus devices listed, up to the widest which reaches 412 px.
Why does the resolution announced by OnePlus not match the CSS viewport?
Because these screens display multiple physical pixels per CSS pixel. OnePlus Nord 2 has a panel of 1080 x 2400 pixels and a CSS viewport of 412 x 915 px, with a density of 2.625. It's the second value that should be written in a media query.
How to test your site on a OnePlus device without having one?
With the Mobile FIRST extension: it replicates the viewport, pixel density, User-Agent, and touch events of 1 of these models, directly in your browser, including on a localhost address.
The mentioned brands and models belong to their respective owners.