A layout group that returns later
The same reference viewport appears again on iPhone 16e, so this older regression target remains relevant to a newer model instead of becoming obsolete.
iPhone 14 screen size
iPhone 14: 6.1″, 1170 × 2532, 460 PPI, 390 × 844 CSS viewport at DPR 3. It represents an earlier compact all-screen iPhone layout group and shares its reference viewport with the newer iPhone 16e, preserving one useful regression target across separated generations.
To proportion
6.1″
- Display size
- 6.1″ (15.5 cm) diagonalofficial
- Resolution
- 1170 × 2532 pxofficial
- Pixel density
- 460 PPIofficial
- Aspect ratio
- 19.5:9calculated
- Physical size (display)
- 2.56″ × 5.54″ (6.5 × 14.1 cm)calculated
- CSS viewport
- 390 × 844 pxreference
- Device pixel ratio
- 3reference
- Release year
- 2022
Model-specific guidance
What this means
The next base model moves slightly
Its direct successor belongs to a neighboring layout group, making the pair useful for testing a real transition between standard-iPhone references.
Compact, but not the smallest iPhone case
It applies more layout pressure than later standard-width references, while iPhone SE remains the stronger test for short pages and vertically crowded flows.
Compare this device
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 14 Current page | iPhone 14 | 6.1″ | 1170 × 2532 | 390 × 844 | 460 |
| iPhone 15 The direct successor introduces the neighboring standard-iPhone layout group, making this the useful generational boundary comparison. | iPhone 14 | 6.1″ | 1179 × 2556 | 393 × 852 | 460 |
| iPhone 16e The newer compact model returns to the same primary reference, showing where existing viewport automation can be reused. | iPhone 14 | 6.1″ | 1170 × 2532 | 390 × 844 | 460 |
For developers
For developers
/* iPhone 14 — portrait reference, not a breakpoint */
viewport: 390 × 844 CSS px
panel: 1170 × 2532 · DPR 3
/* Test immediately below and above your layout breakpoints. */Tailwind breakpoint
base
0px-639px
Bootstrap breakpoint
xs
0px-575px
Image slot example
1170 × 657
390px wide at DPR 3
Responsive testing plan
iPhone 14 responsive workflow
Use the 390 × 844 CSS px at DPR 3 as a real QA target, then pair it with nearby widths for regression testing.
Model-specific checks
- Run navigation and modal checks on this model beside iPhone 15 to cover both adjacent standard-iPhone groups.
- Reuse primary viewport automation for iPhone 16e, but keep named-device screenshots and hardware checks separate.
Phones with a similar screen size
Devices with a similar viewport
Devices with a similar DPR
Sources and review dates
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-09-16
Related tools
- Device Screen SizesBrowse sourced screen sizes, resolutions, CSS viewports, DPR and PPI for phones, tablets and laptops, with links to model-level specifications.
- Phone Screen SizesPhone screen size chart with display inches, resolution, PPI and aspect ratio; viewport references where available for tracked iPhone, Galaxy and Pixel phones, including foldables.
- Screen Size ComparisonCompare display dimensions, complete video pictures and A4 page size. View screens side by side or estimate physical size after calibration.
- Viewport Size CheckerSee your browser's CSS viewport size and window size live. Updates as you resize — with current responsive breakpoint for developers.
- Responsive Breakpoint CheckerCheck the current responsive breakpoint live, compare Tailwind and Bootstrap defaults, and copy media queries for common viewport widths.
- Responsive Image CalculatorCalculate responsive image export sizes from CSS pixels and DPR. Generate srcset, sizes and CSS image-set snippets for crisp images.
- PPI CalculatorCalculate PPI from resolution and screen size. Instant results with the formula worked through your numbers, plus physical dimensions and dot pitch.