Viewport spread
This family ranges from 375px to 440px wide. That spread is useful for checking where one shared layout starts to feel cramped or where an expanded layout can safely appear.
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.
Reference guidance
How to use iPhone viewport records
iPhone records are useful for planning responsive layouts, QA device coverage, and screenshot expectations. Start with CSS viewport width because it is the value most layouts respond to, then keep DPR and physical resolution in the notes for image quality and scaling context.
Different browsers, display modes, zoom settings, and orientations can change the live viewport even when the hardware model is the same. Treat these rows as a practical baseline and verify important flows in the screen checker.
For side-by-side planning, open the comparison library or return to the full device database to mix this group with phones, tablets, laptops, monitors, and TVs.
Featured verified references
Start with source-checked iPhone display records
These pages separate Apple-verified display hardware from normalized CSS viewport references, with browser caveats and task-specific QA guidance.
Hardware source verified
iPhone 16 Screen Size, Resolution and Viewport
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.
Open iPhone referenceHardware source verified
iPhone 16 Plus Screen Size, Resolution and Viewport
Check the iPhone 16 Plus 6.7-inch display, 1290 × 2796 native resolution, 460 PPI, DPR 3 and 430 × 932 CSS viewport reference.
Open iPhone referenceHardware source verified
iPhone 16 Pro Screen Size, Resolution and Viewport
Check the iPhone 16 Pro 6.3-inch display, 1206 × 2622 native resolution, 460 PPI, DPR 3 and 402 × 874 CSS viewport reference.
Open iPhone referenceHardware source verified
iPhone 16 Pro Max Screen Size, Resolution and Viewport
Check the iPhone 16 Pro Max 6.9-inch display, 1320 × 2868 native resolution, 460 PPI, DPR 3 and 440 × 956 CSS viewport reference.
Open iPhone referenceHardware source verified
iPhone 15 Pro Max Screen Size, Resolution and Viewport
Check the iPhone 15 Pro Max 6.7-inch display, 1290 × 2796 native resolution, 460 PPI, DPR 3 and 430 × 932 CSS viewport reference.
Open iPhone referenceFamily interpretation
How to choose records from this table
This family page is most useful when one device is not enough. Use the spread of widths, heights, DPR values, and diagonal sizes to choose a realistic minimum, middle, and maximum reference before you decide which models deserve live testing time.
Density range
Pixel density runs from about 326 PPI to 476 PPI. Keep that range in mind when image softness, screenshot clarity, or canvas rendering look inconsistent across the same family.
Physical size range
Diagonal size moves from 4.7 inches to 6.9 inches. The physical screen can change a lot even when CSS viewport values stay surprisingly close.
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.
Active filters
Swipe horizontally to view all viewport, resolution, DPR, PPI, source, and notes columns.
| Device | Family | Type | Viewport / scaling | 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 | Apple iPhone 15 Pro Max technical specifications Hardware verified; viewport reference | Common large iPhone viewport reference. |
|
iPhone 16
Apple · 2024
|
iPhone | Phone | 393 × 852 | 1179 × 2556 | 3 | 460 | Apple iPhone 16 technical specifications Hardware verified; viewport reference | Mainstream modern iPhone width for common mobile breakpoints. |
|
iPhone 16 Plus
Apple · 2024
|
iPhone | Phone | 430 × 932 | 1290 × 2796 | 3 | 460 | Apple iPhone 16 Plus technical specifications Hardware verified; viewport reference | Large non-Pro iPhone viewport reference for portrait mobile QA. |
|
iPhone 16 Pro
Apple · 2024
|
iPhone | Phone | 402 × 874 | 1206 × 2622 | 3 | 460 | Apple iPhone 16 Pro technical specifications Hardware verified; viewport reference | Useful for modern iOS Pro breakpoint checks. |
|
iPhone 16 Pro Max
Apple · 2024
|
iPhone | Phone | 440 × 956 | 1320 × 2868 | 3 | 460 | Apple iPhone 16 Pro Max technical specifications Hardware verified; viewport reference | 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 screen shapes
Compare physical screen proportions and native pixel grids, or switch to CSS viewport references for responsive-layout work. Every drawing uses one shared scale so the relative size remains meaningful.
Left device
Right device
CSS viewport comparison
Compare two devices to see the relative area.
—
iPhone 12 / 12 Pro
iPhone · DPR 3 · 460 PPI
—
iPhone 13 mini
iPhone · DPR 3 · 476 PPI
Matrix planning
Build a practical test matrix for this family
Family pages help you avoid over-testing one model and under-testing the rest. The goal is to choose a representative minimum, middle, and maximum reference before you spend time on live device QA.
The middle of this family sits around 393px wide and 852px tall. That makes it a useful default reference when you want one realistic starting point before expanding to the narrowest and widest examples.
iPhone 13 mini shows the earliest layout pressure in this set, while iPhone 16 Pro Max reveals where spacing, multi-column panels, and oversized media can start to stretch. Use both ends of the range before deciding that one shared breakpoint strategy is enough.
iPhone 13 mini is the sharpness outlier here, and iPhone 16 Pro Max gives the tallest first-screen view. That combination is useful when the same design feels visually crisp on one model but cramped on another even though the CSS widths look close.
Use the family table for planning, then move into the comparison library when you need side-by-side explanations, or back to the full device database when the right QA matrix spans multiple families.
Coverage checklist
Common layout risks in this family
Pick a tight reference first
Start QA with iPhone 13 mini or the narrowest viewport in this family. If the layout works there, it is easier to reason about which enhancements can appear on wider models.
Test the roomiest model too
Use iPhone 16 Pro Max when checking stretched cards, large hero media, table width, multi-column panels, and max-width rules that can look different on the widest family member.
Confirm the tallest viewport
iPhone 16 Pro Max is the tallest record in this set. Use it to check above-the-fold messaging, sticky footers, keyboard overlays, and long-scroll layouts.
Keep sharpness in the notes
iPhone 13 mini is the densest record in this family. Include DPR and PPI in QA notes when screenshots or icon rendering appear sharper than expected.
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.
Next comparisons
Comparisons to open next
These side-by-side pages help turn a family table into a decision. Open them when you need to explain which model is tighter, taller, sharper, or physically larger in real QA and design terms.
Visual display comparison
Screen Size Comparison Tool
Compare phones, tablets, laptops, monitors, and TVs by CSS viewport, physical resolution, DPR, PPI, and relative screen shape.
Open comparison →Phone viewport comparison
iPhone 15 Pro Max vs Samsung Galaxy S24 Ultra
Compare large iPhone and Android flagship viewport references for mobile layout testing.
Open comparison →iPhone comparison
iPhone 16 vs iPhone 16 Pro Screen Comparison
Compare iPhone 16 and iPhone 16 Pro viewport and resolution references for responsive testing and mobile design QA.
Open comparison →iPhone comparison
iPhone 16 Pro vs iPhone 16 Pro Max Screen Comparison
Compare iPhone 16 Pro and iPhone 16 Pro Max viewport sizes, physical resolution, and display shape for mobile testing.
Open comparison →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.