iPhone 12 / 12 Pro sourced display reference
Use this reviewed phone record for older 390-pixel iPhone coverage. Hardware specifications and representative browser-testing values are kept separate so the page does not imply that a static CSS profile is a measured device state.
Reference scope: iPhone 12 / 12 Pro (2020) display record. Check the generation and display option before using the profile; other sizes and modes are outside this page.
Two measurement layers
The native display values come from Apple. CSS dimensions are a normalized testing baseline and remain dependent on browser state.
| Field | Reference value | Evidence scope |
|---|---|---|
| Display diagonal | 6.1 inches | Apple manufacturer specification; rounded corners or display shape can reduce viewable area. |
| Native pixel grid | 1170 × 2532 | Apple manufacturer specification in portrait or logical display order. |
| Pixel density | 460 PPI | Apple stated or specification-derived hardware density. |
| CSS viewport | 390 × 844 CSS px | Representative ScreenMetricLab QA profile; not measured on the named device in this review. |
| Device pixel ratio | 3 | Representative testing value; verify window.devicePixelRatio in the target browser and display mode. |
| Record year | 2020 | Model-generation context; verify the exact configuration. |
| Reference CSS area | 329,160 CSS px² | Calculated from the normalized width and height; not physical screen area. |
Manufacturer-verified layer
The sourced layer establishes the named model, display diagonal, native pixel grid and stated pixel density. Common older iPhone width still useful for QA coverage. These hardware facts do not establish the dimensions available to a webpage or prove how a specific browser will render at a particular moment.
Browser-dependent layer
The 390 × 844 CSS profile is useful for older 390-pixel iPhone coverage, but it is a testing scenario rather than a manufacturer specification. Capture innerWidth, innerHeight, visualViewport and devicePixelRatio on the target browser when a release decision depends on exact behavior.
At DPR 3, the mapping uses 3 in each direction and 9 raster pixel units of area (DPR²). Browser zoom, OS scaling, and device downsampling can change the observed result.
Responsive testing decisions
This record is most useful when the test has a clear layout question and the observed browser state is saved with the result.
Render real navigation, forms and cards at 390 CSS pixels, then check wrapping, truncation and stacking instead of treating the profile as a universal breakpoint.
On iPhone 12 / 12 Pro, repeat older 390-pixel iPhone coverage in portrait and landscape, with browser controls and the on-screen keyboard present where relevant. Record the visual viewport as well as the layout viewport.
For iPhone 12 / 12 Pro, inspect responsive images, icons, canvas output and screenshots at the representative DPR 3. Use the measured DPR for production calculations rather than inferring it from the native grid.
Use the iPhone 12 / 12 Pro profile with increased text size and long labels, then operate the interface by keyboard or touch. Confirm controls remain reachable and at least 44 by 44 CSS pixels.
Limits of a static record
A model name and portrait reference cannot reproduce every browser, accessibility, orientation, keyboard, or safe-area condition.
Evidence and provenance
Apple is cited for the 6.1-inch diagonal, 1170 × 2532 native grid and 460 PPI. The 390 × 844 CSS profile and DPR 3 are representative ScreenMetricLab testing values, not manufacturer claims or real-device measurements.
Review method: AI-assisted desk research checked the named model against the linked primary manufacturer specification. An editor reviewed the published facts, model scope and limitations. CSS viewport and DPR values remain explicitly unmeasured testing profiles.
Reviewed September 20, 2026 by ScreenMetricLab Editorial Team.
Frequently asked questions
No. It is a representative QA profile. This review verified manufacturer hardware specifications but did not measure a live browser on the named device.
Window size, browser controls, zoom, display scaling, orientation, keyboard state, split view and accessibility settings can change the CSS space available to a page.
Usually not. Responsive CSS reacts to the live CSS viewport. Native physical pixels are useful for hardware and media context, not as an automatic layout breakpoint.
Use it as one documented scenario, test adjacent widths and difficult content, then confirm important behavior in the actual browsers and device states your audience uses.
Continue testing
Related iPhone reference
Check the iPhone 16 6.1-inch display, 1179 × 2556 native resolution, 460 PPI, DPR 3 and 393 × 852 CSS viewport reference for mobile QA.
View referenceRelated iPhone reference
Check the iPhone 16 Plus 6.7-inch display, 1290 × 2796 native resolution, 460 PPI, DPR 3 and 430 × 932 CSS viewport reference.
View referenceRelated iPhone reference
Check the iPhone 16 Pro 6.3-inch display, 1206 × 2622 native resolution, 460 PPI, DPR 3 and 402 × 874 CSS viewport reference.
View referenceRelated iPhone reference
Check the iPhone 16 Pro Max 6.9-inch display, 1320 × 2868 native resolution, 460 PPI, DPR 3 and 440 × 956 CSS viewport reference.
View referenceLive browser tool
Measure the current layout and visual viewport before recording a device-specific QA result.
Check viewportMobile layout guide
Keep controls clear of rounded corners, browser UI, and device safe-area boundaries.
Read guide