Device screen reference
Use this reference for iPhone 14 Pro CSS viewport width, physical resolution, DPR, diagonal size, PPI, and responsive testing notes.
| Brand | Apple |
|---|---|
| Family | iPhone |
| Type | Phone |
| CSS viewport | 393 × 852 |
| Physical resolution | 1179 × 2556 |
| Device pixel ratio | 3 |
| Diagonal | 6.1 inches |
| Pixel density | 460 PPI |
| Aspect ratio | 19.5:9 |
| Source label | Manufacturer specs + viewport reference |
| Confidence | Review |
Visual comparison
Pick two records and compare CSS viewport or physical resolution shapes. The drawing is scaled for relative size, so it is useful for layout intuition before opening the detailed records.
CSS viewport comparison
Compare two devices to see the relative area.
Family · DPR · PPI
Family · DPR · PPI
Responsive testing notes
Use 393 × 852 as a practical starting point for testing iPhone 14 Pro layouts, then confirm the live viewport in the browser you are targeting.
Start breakpoint checks around 393px, then resize slightly above and below that value.
A DPR of 3 affects image sharpness, canvas rendering, and screenshot interpretation.
Use the live checker because browser chrome, orientation, zoom, and OS scaling can change the usable area.
Source and update note
This page is built from the ScreenMetricLab device viewport dataset. Values are normalized for practical QA and design use, but they should be verified on real devices or browser emulators before publishing critical layouts.
Record source: Physical specs come from manufacturer-style display references; CSS viewport is a practical browser reference that should be verified on the target device/browser.
Device references should be reviewed regularly as browsers, OS scaling, and hardware options change.
Pair this page with the viewport checker, DPR checker, and screen resolution checker for better QA notes.
The reference CSS viewport for iPhone 14 Pro is 393 × 852. Live browser values can still change because of zoom, browser UI, OS display scaling, orientation, and responsive mode.
No. The physical resolution for this device is 1179 × 2556, while the CSS viewport is the layout area that websites normally use for responsive breakpoints.
Use the CSS viewport width first when checking breakpoints and layout bugs. Include DPR and physical resolution as extra context in QA reports.
Browser chrome, zoom, operating-system scaling, accessibility settings, split view, and orientation can all change the viewport reported by JavaScript.
Use these tools to validate this device reference in a live browser.
Related devices
