Apple • SMARTPHONE • 6.3"
iPhone 16 Pro Viewport Size & CSS Resolution
The iPhone 16 Pro features a 6.3-inch Super Retina XDR OLED display with a CSS viewport of 402 x 874 logical pixels at a 3x Device Pixel Ratio (DPR). Use the interactive simulator and verified CSS media queries below for pixel-perfect responsive frontends.
CSS Viewport402 × 874px logical
Physical Screen1206 × 2622px native
Device Pixel Ratio3× DPRRetina scale
Aspect Ratio19.5:96.3"
Brand & YearAppleReleased 2024
Tailwind TierDefaultDefault Mobile (< 640px)
Interactive Display Canvas Simulator
Simulates iPhone 16 Pro canvas proportion (402 × 874 CSS px)
9:41100%
iPhone 16 Pro402 × 874 px
DPR: 3x
19.5:9
Responsive Viewport
Ready-to-Use Developer Snippets
@media screen and (max-width: 402px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait)
Frontend Design Best Practices
- Account for Dynamic Island height (approx 54px) and safe area insets: env(safe-area-inset-top).
- Use env(safe-area-inset-bottom) for bottom navigation bars to avoid overlapping the home indicator pill.
- Test touch targets with a minimum of 44x44 CSS pixels.
CSS Viewport Specification
CSS Logical Width402 px
CSS Logical Height874 px
Hardware Native Width1206 px
Hardware Native Height2622 px
Pixel Density (DPR)3×
Aspect Ratio19.5:9
Frequently Asked Questions About iPhone 16 Pro Screen Dimensions
Frequently Asked Questions
Frequently Asked Questions
Everything you need to know regarding specifications, syntax, and security best practices.
The CSS viewport size of the iPhone 16 Pro is 402 x 874 pixels in portrait mode, and 874 x 402 pixels in landscape mode.