—
Device
Family · DPR · PPI
iOS viewport reference
iPhone Viewport Sizes
Use iPhone viewport sizes to test mobile breakpoints, screenshots, safe areas, and responsive layouts in Safari and Chrome on iOS.
iPhone viewport table
Use these values as starting points for responsive testing. Always verify final behavior in the actual browser and orientation you are targeting.
Filter device database
Search the full viewport reference set, then narrow results by device family, brand, type, DPR, and CSS viewport width.
Advanced filters
11 devices shown from 11 records.
Swipe horizontally to view all viewport, resolution, DPR, PPI, source, and notes columns.
| Device | Family | Type | CSS viewport | Resolution | DPR | PPI | Source | Notes |
|---|---|---|---|---|---|---|---|---|
|
iPhone 12 / 12 Pro
Apple · 2020
|
iPhone | Phone | 390 × 844 | 1170 × 2532 | 3 | 460 | Manufacturer specs + iOS viewport reference High | Common older iPhone width still useful for QA coverage. |
|
iPhone 13 mini
Apple · 2021
|
iPhone | Phone | 375 × 812 | 1080 × 2340 | 3 | 476 | Manufacturer specs + iOS viewport reference High | Small high-DPI iPhone reference for compact mobile layouts. |
|
iPhone 14 Pro
Apple · 2022
|
iPhone | Phone | 393 × 852 | 1179 × 2556 | 3 | 460 | Manufacturer specs + viewport reference Review | Similar CSS viewport to newer 6.1-inch Pro models. |
|
iPhone 15 / 15 Pro
Apple · 2023
|
iPhone | Phone | 393 × 852 | 1179 × 2556 | 3 | 460 | Manufacturer specs + viewport reference Review | Good baseline for modern iPhone layouts. |
|
iPhone 15 Plus
Apple · 2023
|
iPhone | Phone | 430 × 932 | 1290 × 2796 | 3 | 460 | Manufacturer specs + iOS viewport reference High | Large mainstream iPhone viewport similar to Pro Max browser layout testing. |
|
iPhone 15 Pro Max
Apple · 2023
|
iPhone | Phone | 430 × 932 | 1290 × 2796 | 3 | 460 | Manufacturer specs + viewport reference Review | Common large iPhone viewport reference. |
|
iPhone 16
Apple · 2024
|
iPhone | Phone | 393 × 852 | 1179 × 2556 | 3 | 460 | Manufacturer specs + iOS viewport reference High | Mainstream modern iPhone width for common mobile breakpoints. |
|
iPhone 16 Plus
Apple · 2024
|
iPhone | Phone | 430 × 932 | 1290 × 2796 | 3 | 460 | Manufacturer specs + iOS viewport reference High | Large non-Pro iPhone viewport reference for portrait mobile QA. |
|
iPhone 16 Pro
Apple · 2024
|
iPhone | Phone | 402 × 874 | 1206 × 2622 | 3 | 460 | Manufacturer specs + viewport reference Review | Useful for modern iOS Pro breakpoint checks. |
|
iPhone 16 Pro Max
Apple · 2024
|
iPhone | Phone | 440 × 956 | 1320 × 2868 | 3 | 460 | Manufacturer specs + viewport reference Review | Typical portrait CSS viewport; browser chrome and zoom can change visible height. |
|
iPhone SE 3rd gen
Apple · 2022
|
iPhone | Phone | 375 × 667 | 750 × 1334 | 2 | 326 | Manufacturer specs + viewport reference Review | Small iPhone viewport useful for compact layout checks. |
| No device records match these filters. Reset filters or try a broader search. | ||||||||
Values are practical references and can vary by browser, zoom, OS scaling, display mode, and orientation.
Visual comparison
Compare viewport shapes
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.
Left device
Right device
CSS viewport comparison
Compare two devices to see the relative area.
—
Device
Family · DPR · PPI
Use CSS viewport first
Responsive breakpoints usually react to CSS viewport width, not physical display resolution.
Record DPR
DPR helps explain why a high-resolution device can still report a smaller CSS viewport.
Check orientation
Portrait, landscape, split-view, and browser UI can all change the usable viewport.
Source notes
Use these records as starting points
This viewport reference database combines manufacturer display specifications, practical CSS viewport references, browser testing notes, and normalized QA-friendly values. Physical resolution, diagonal, and PPI are hardware-level references; CSS viewport values can change with browser UI, zoom, OS display scaling, orientation, split view, and responsive mode. Use these records as practical testing baselines and verify critical layouts on real browsers.
Manufacturer specifications
Use official Apple, Google, Samsung, monitor, and TV specification pages for physical resolution, diagonal size, and PPI/marketing display references.
Browser viewport testing
Use live browser measurements from Safari, Chrome, Firefox, Edge, device simulators, and real devices to validate CSS viewport width and height.
CSS/device behavior documentation
Use browser documentation for viewport, visualViewport, DPR, and responsive behavior when explaining why live values differ from physical specs.
Quarterly editorial review
Review newly released devices, OS display scaling changes, and browser UI changes before expanding indexed device pages.