Apple • SMARTPHONE • 6.1"
iPhone 16 Viewport Size & CSS Resolution
The standard iPhone 16 features a 6.1-inch OLED screen with a logical resolution of 393 x 852 CSS pixels at 3x DPR. Use the interactive simulator and verified CSS media queries below for pixel-perfect responsive frontends.
CSS Viewport393 × 852px logical
Physical Screen1179 × 2556px native
Device Pixel Ratio3× DPRRetina scale
Aspect Ratio19.5:96.1"
Brand & YearAppleReleased 2024
Tailwind TierDefaultDefault Mobile (< 640px)
Interactive Display Canvas Simulator
Simulates iPhone 16 canvas proportion (393 × 852 CSS px)
9:41100%
iPhone 16393 × 852 px
DPR: 3x
19.5:9
Responsive Viewport
Ready-to-Use Developer Snippets
@media screen and (max-width: 393px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait)
Frontend Design Best Practices
- Shares identical CSS logical dimensions with iPhone 15 and iPhone 14 Pro (393 x 852 px).
- Accommodates Dynamic Island at top safe area inset.
- Use 16px standard body font size to prevent iOS Safari auto-zoom on input focus.
CSS Viewport Specification
CSS Logical Width393 px
CSS Logical Height852 px
Hardware Native Width1179 px
Hardware Native Height2556 px
Pixel Density (DPR)3×
Aspect Ratio19.5:9
Frequently Asked Questions About iPhone 16 Screen Dimensions
Frequently Asked Questions
Frequently Asked Questions
Everything you need to know regarding specifications, syntax, and security best practices.
The iPhone 16 renders at 393 x 852 logical CSS pixels with a 3x device pixel ratio.