Compact 2021 iPhone reference
A compact-phone reference for crowded navigation, form controls and short-screen interactions, with a separate explanation of native pixels and the CSS profile.
Reference scope: iPhone 13 mini (2021), excluding iPhone 13 and iPhone 12 mini.
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 | 5.4 inches | Apple specification: 5.4-inch class, 5.42-inch standard rectangle; actual viewable area is less. |
| Native pixel grid | 1080 × 2340 | Apple specification in portrait width × height order; not CSS width multiplied by DPR. |
| Pixel density | 476 PPI | Apple-stated hardware density: 476 PPI. |
| CSS viewport | 375 × 812 CSS px | Retained compact-phone QA profile; no live Safari measurement in this review. |
| Device pixel ratio | 3 | QA profile assumption; it does not establish native panel dimensions. |
| Record year | 2021 | Model-generation context; verify the exact configuration. |
| Reference CSS area | 304,500 CSS px² | Calculated from the normalized width and height; not physical screen area. |
Manufacturer-verified layer
This page covers the 2021 mini model. Apple distinguishes the marketed 5.4-inch display from a 5.42-inch standard rectangular measurement; rounded corners reduce the actual visible area. Neither measurement describes the phone body or a browser content box.
Browser-dependent layer
At 375 CSS pixels, the profile is 18 pixels narrower than the iPhone 14 Pro reference. Use that modest reduction to stress long names, segmented controls and two-button rows rather than assuming a compact phone requires different navigation.
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
A useful compact test keeps the same content and task as the larger-phone version, then checks what breaks when horizontal space shrinks.
Test cancel-and-confirm or quantity-and-cart controls at 375 pixels with long translated labels. Allow wrapping or stacking before labels become clipped.
Focus the final field in a multi-step form and check that instructions, validation and the next action remain reachable when the visible height contracts.
Use real section names and signed-in account text in the header. Count actual wrapping and overflow rather than judging an empty navigation mockup.
A 375-pixel-wide test rendered at DPR 3 would imply a 1125-pixel buffer, while Apple lists a 1080-pixel panel width. Record capture method and dimensions rather than treating these as interchangeable.
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 lists a 5.4-inch OLED display, 1080 × 2340 native pixels and 476 PPI. The 375 × 812 CSS profile at DPR 3 is a retained browser-testing reference, not an Apple specification. No real-device browser measurement was performed for this review; CSS dimensions multiplied by DPR must not be presented as this model’s native grid.
Review method: AI-assisted desk review of Apple Support checked the model year, display diagonal, native resolution and stated PPI. The existing CSS profile was retained as an unmeasured QA scenario; the review explicitly checked and documented its mismatch with a simple native-pixel multiplication.
Reviewed September 5, 2026 by ScreenMetricLab Editorial Team.
Frequently asked questions
Apple uses 5.4 inches as the display class and 5.42 inches for the standard rectangular diagonal. Rounded corners make the viewable area smaller than that rectangle.
No. That gives 1125 × 2436, while Apple lists 1080 × 2340. The retained CSS profile and a native panel specification must be recorded separately.
No real-device measurement was performed in this review. Use it as a compact QA scenario and record the actual layout and visual viewport on your test phone.
Yes. A small reduction in width can wrap one label, enlarge a card or push a control below the visible area. Use long content and keyboard-open states in the compact test.
Continue testing
Related iPhone reference
iPhone 12 / 12 Pro has a 6.1-inch display and 1170 × 2532 native pixels. Review its sourced hardware facts, CSS profile, DPR limits and practical QA uses.
View referenceRelated iPhone reference
iPhone SE 3rd gen has a 4.7-inch display and 750 × 1334 native pixels. Review its sourced hardware facts, CSS profile, DPR limits and practical QA uses.
View referenceRelated iPhone reference
Verify iPhone 14 Pro 6.1-inch hardware, 1179 × 2556 pixels and 460 PPI; use the 393 × 852 CSS profile for safe-area and cross-generation QA.
View referenceRelated 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 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