iPhone 14 and 15 Display Specifications
The 1170x2532 resolution is the native physical pixel resolution of the iPhone 14, iPhone 15, iPhone 13 Pro, and iPhone 14 Pro displays. These 6.1-inch Super Retina XDR OLED panels operate at a 3x device pixel ratio, resulting in a logical viewport of 390x844 CSS pixels. The 460 PPI pixel density makes individual pixels invisible to the naked eye, delivering exceptionally sharp text, images, and UI elements. This resolution has become the most common iPhone screen size in active use, as it spans multiple generations of Apple's most popular models. Web developers should treat 390x844 as the primary iPhone viewport for responsive design testing.
Working with 3x Device Pixel Ratio
The 3x DPR means that every CSS pixel is rendered using a 3x3 grid of physical pixels, totaling 9 physical pixels per logical pixel. For images to appear perfectly sharp on these devices, they need to be served at 3x their displayed CSS dimensions. An image displayed at 390px wide in CSS needs a source image of 1170px wide. However, serving 3x images for all assets can significantly increase page weight. A pragmatic approach is to serve 2x images, which still look sharp enough on 3x displays while reducing bandwidth by approximately 55% compared to 3x assets. Use the srcset attribute with pixel density descriptors to let the browser choose: srcset="image-780.jpg 2x, image-1170.jpg 3x". Most users cannot perceive the difference between 2x and 3x on these high-density screens.
Safe Areas and the Notch
iPhone 14 and 15 models feature either a notch (iPhone 14) or Dynamic Island (iPhone 14 Pro, iPhone 15 series) that intrudes into the display area. In Safari, the browser chrome handles the notch area, but for web apps running in full-screen or standalone mode, you must account for safe area insets. Use the CSS env() function to respect these areas: padding-top: env(safe-area-inset-top); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom). Set the viewport meta tag to viewport-fit=cover to extend your content to the edges of the screen, then use safe area insets to prevent content from being obscured by the notch or home indicator.
Mobile-First CSS for iPhone Viewports
With a 390px logical viewport width, the iPhone 14/15 represents a common baseline for mobile-first CSS development. Start your styles with the mobile layout as the default, then use min-width media queries to add complexity for larger screens. At 390px, you have room for single-column layouts with approximately 16px of padding on each side, leaving 358px of content width. Touch targets should be at least 44x44 CSS pixels per Apple's Human Interface Guidelines. Font sizes should be at least 16px for body text to prevent iOS Safari from auto-zooming on form input focus. Set the viewport meta tag to width=device-width, initial-scale=1 to ensure the browser uses the logical 390px width rather than a zoomed-out desktop rendering.