Viewport Sizes for iPhone

Every Apple iPhone uses a Retina display — a high-density screen where the physical pixel count is 2× or 3× higher than what CSS and web browsers actually work with. That logical pixel dimension is the iPhone viewport size, and it is what determines how your website lays out on any iPhone model.

Apple's Retina technology packs so many physical pixels per inch that individual dots become invisible to the human eye at a normal viewing distance. To keep web content at readable sizes, iOS applies a device pixel ratio (DPR) of 2.0 or 3.0 — scaling down the native screen resolution to a smaller, logical CSS pixel grid. For example, an iPhone with a 1179 × 2556 screen resolution and a DPR of 3.0 has a viewport of 393 × 852 CSS pixels. When you write a media query like max-width: 430px, you are targeting that logical viewport — not the hardware resolution. Every iPhone's viewport width, also known as device-width, is the value that drives your responsive breakpoints and CSS layouts. See the full Viewport Size comparison table for all devices for a broader view across phones, tablets, and laptops.

The table below lists every Apple iPhone model from the iPhone 5 through the latest iPhone 17 series, including viewport size, screen resolution, pixel density (PPI), device pixel ratio, CSS PPI, and a direct link to CSS media queries for each model: