iPhone SE (3rd gen): 4.7″, 750 × 1334, 326 PPI, 375 × 667 CSS viewport at DPR 2. The SE is the shortest iPhone layout reference in this collection. Its compact, less elongated panel makes vertical space the key constraint; a later small-positioned iPhone is not an equivalent replacement for that check.
Identical top and bottom controls occupy a larger share of this short reference canvas. The height budget explains that constraint; keyboard-open form usability still needs a check of the active field, scrolling and submit action on the device.
This SE uses a lower DPR reference than the other tracked iPhones. Keep its image-selection check when moving routine layout testing to a newer model; physical size alone does not identify the correct image candidate.
Worked example · reference dimensions
The same example controls occupy about 18% of the iPhone SE (3rd gen) reference height and 14.2% on iPhone 16e.
Example inputs: a 56 CSS px top bar and a 64 CSS px bottom bar. Dark areas represent those assumed controls.
| Reference | Remaining height |
|---|---|
| iPhone SE (3rd gen) | 547 CSS px |
| iPhone 16e | 724 CSS px |
The companion has 177 CSS px more remaining height, while the reference width differs by 15 CSS px.
Subtract the same two example inputs from each reference height; divide their combined height by each reference height for the occupied percentage. This budget is not a live visual viewport or a demonstrated form failure. Keyboard, browser controls and safe-area effects require separate measurement.
CSS canvas, DPR and workspace values are references, not manufacturer guarantees or live browser measurements. Matching references alone do not guarantee identical fonts, line breaks or rendering across real devices.
These are the dates of the recorded fact checks. A hardware specification source does not establish a browser viewport. Calculations and illustration assumptions are described above; no new device measurements are claimed.
The specifications below come from the device records; the notes explain why each comparison is useful.
| Device configuration | Matched to | Screen | Panel | Viewport / workspace | PPI |
|---|---|---|---|---|---|
| iPhone SE (3rd gen) Current page | iPhone SE (3rd gen) | 4.7″ | 750 × 1334 | 375 × 667 | 326 |
| iPhone 14 The older all-screen base model is the useful companion for separating extreme compact pressure from standard iPhone behavior. | iPhone SE (3rd gen) | 6.1″ | 1170 × 2532 | 390 × 844 | 460 |
| iPhone 16e The newer compact-positioned model shows why a current small iPhone and the SE remain different responsive targets. | iPhone SE (3rd gen) | 6.1″ | 1170 × 2532 | 390 × 844 | 460 |
/* iPhone SE (3rd gen) — portrait reference, not a breakpoint */
viewport: 375 × 667 CSS px
panel: 750 × 1334 · DPR 2
/* Test immediately below and above your layout breakpoints. */Use the 375 × 667 CSS px at DPR 2 as a real QA target, then pair it with nearby widths for regression testing.
Values marked official come from manufacturer specifications; calculated values are derived from them; reference values are developer layout references and can vary with browser, zoom and operating-system settings.
Sources: Apple Support · github.com · Facts reviewed 2026-09-16
Content reviewed 2026-10-22