Device Viewport Reference
Complete viewport dimensions, physical resolution, and display specifications for all iPhone 15 models — essential for responsive web design.
The iPhone 15 and iPhone 15 Pro have a CSS viewport of 393 × 852 pixels with a 3x device pixel ratio, giving a physical resolution of 1179 × 2556 pixels. The iPhone 15 Plus and iPhone 15 Pro Max have a CSS viewport of 430 × 932 pixels.
When building responsive websites for iPhone 15, you work with CSS pixels (also called logical pixels or points), not the physical hardware resolution. The iPhone 15 reports a viewport of 393 × 852 CSS pixels to web browsers. This is the value you use in your media queries, flexbox layouts, and CSS grid definitions.
The device pixel ratio (DPR) of 3x means every CSS pixel is rendered using a 3×3 grid of physical pixels. This is why images on iPhone 15 need to be 3× their CSS dimensions for crisp rendering — a 100×100 CSS image should be 300×300 physical pixels for Retina quality.
Always include the viewport meta tag in your HTML to ensure proper rendering:
Here are targeted media queries for iPhone 15 models. Note that targeting specific devices is generally less preferred than fluid responsive design, but can be useful for fine-tuning:
iPhone 15's 3x Retina display requires high-resolution images for crisp rendering. A hero image displayed at 393 CSS pixels wide needs to be at least 1179 physical pixels wide. Use the srcset attribute and the <picture> element for responsive images:
The iPhone 15 and iPhone 15 Pro have a CSS viewport of 393 × 852 pixels with a 3x device pixel ratio, giving a physical resolution of 1179 × 2556 pixels. The iPhone 15 Plus and iPhone 15 Pro Max have a CSS viewport of 430 × 932 pixels.
CSS pixels (also called logical pixels or points) are the values used in your CSS code. Physical pixels are the actual hardware pixels on the display. iPhone 15 has a 3x device pixel ratio, meaning each CSS pixel maps to a 3×3 grid of physical pixels. So 393 CSS pixels = 1179 physical pixels.
Use the viewport meta tag with width=device-width and initial-scale=1.0. Design for 393px width (standard) or 430px (Plus/Pro Max). Use CSS media queries like @media (max-width: 430px) for iPhone-specific layouts. Test with Safari's responsive design mode or Chrome DevTools.
iPhone 15 (393×852) has a slightly different viewport than iPhone 14 (390×844). The 3px width difference and 8px height difference are minimal but worth noting for pixel-perfect designs. iPhone 15 Pro matches iPhone 14 Pro at 393×852.
In Chrome DevTools, set the device dimensions to 393×852 for iPhone 15/15 Pro, or 430×932 for iPhone 15 Plus/15 Pro Max. Set the device pixel ratio to 3. You can also add these as custom devices for quick access.
The iPhone 15's Dynamic Island and home indicator reduce the usable viewport area. Use CSS environment variables: env(safe-area-inset-top), env(safe-area-inset-bottom), etc. The viewport-fit=cover meta attribute allows content to extend into safe areas when needed.
Most CSS frameworks use 375px or 390px as the mobile breakpoint, which works well for iPhone 15 at 393px. For iPhone 15 Plus/Pro Max at 430px, the standard small-tablet breakpoint (typically 480px or 576px) is appropriate. Tailwind CSS uses 640px (sm) as the first breakpoint.