Apple • SMARTPHONE • 6.1"
iPhone 14 / 13 / 12 Viewport Size & CSS Resolution
The iPhone 14, 13, and 12 base models share the classic notch design with a CSS viewport of 390 x 844 pixels at 3x DPR. Use the interactive simulator and verified CSS media queries below for pixel-perfect responsive frontends.
CSS Viewport390 × 844px logical
Physical Screen1170 × 2532px native
Device Pixel Ratio3× DPRRetina scale
Aspect Ratio19.5:96.1"
Brand & YearAppleReleased 2022
Tailwind TierDefaultDefault Mobile (< 640px)
Interactive Display Canvas Simulator
Simulates iPhone 14 / 13 / 12 canvas proportion (390 × 844 CSS px)
9:41100%
iPhone 14 / 13 / 12390 × 844 px
DPR: 3x
19.5:9
Responsive Viewport
Ready-to-Use Developer Snippets
@media screen and (max-width: 390px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: portrait)
Frontend Design Best Practices
- Top notch cutout requires env(safe-area-inset-top) which is typically 47px on notched iPhones.
- One of the most common active iOS devices globally; essential for QA testing.
CSS Viewport Specification
CSS Logical Width390 px
CSS Logical Height844 px
Hardware Native Width1170 px
Hardware Native Height2532 px
Pixel Density (DPR)3×
Aspect Ratio19.5:9
Frequently Asked Questions About iPhone 14 / 13 / 12 Screen Dimensions
Frequently Asked Questions
Frequently Asked Questions
Everything you need to know regarding specifications, syntax, and security best practices.
All three base models share the identical 390 x 844 CSS pixel viewport.