Device Screen Sizes & Resolutions

Logical vs physical resolution and DPR

Every modern screen has two resolutions. The physical resolution is the real number of pixels built into the panel — for example 1179 × 2556 on an iPhone 15. The logical (CSS) resolution is the smaller coordinate space a web page is laid out in, such as 393 × 852. The device pixel ratio (DPR) is the bridge between them: it is the physical resolution divided by the logical one, so a DPR of 3 means the phone draws a 3 × 3 block of real pixels for every CSS pixel. High-density “Retina” phones and laptops use a DPR of 2 or 3 to render crisp text and images, while a typical desktop monitor has a DPR of 1, where one CSS pixel equals one physical pixel.

Why designers work in viewport sizes

When you build a responsive layout, your CSS media queries and breakpoints are measured in CSS pixels — the logical viewport — not the panel's physical pixels. A phone that is physically 1080 pixels wide still reports a viewport of only 360–414 CSS pixels, which is why a 360px mobile breakpoint covers most Android phones. Designing to the viewport rather than the raw resolution keeps text and touch targets a consistent physical size across devices with very different pixel densities, so the same layout feels right on a low-density laptop and a dense flagship phone alike.

How to read this table

• Viewport (CSS px) is the logical size a web page sees, listed in the device’s natural orientation — portrait for phones and tablets, landscape for laptops and monitors.
• Physical resolution is the panel’s true pixel count, the figure a spec sheet advertises.
• DPR (device pixel ratio) multiplies the viewport up to the physical resolution; any value above 1 means a high-density display.
• Aspect ratio is the shape of the screen, from the tall 19.5:9 of modern phones to the 16:9 of most monitors and the 21:9 and 32:9 of ultrawides.
• Laptop and 4K rows reflect the common default display-scaling level, so the viewport can be smaller than the panel’s native resolution.

Sizes change with every model

Treat these figures as a practical reference, not a guarantee. Manufacturers revise screen dimensions almost every generation — the iPhone alone has shipped viewports 375, 390, 393, 402, 414, 430 and 440 CSS pixels wide across recent models — and Android devices vary even more widely. Operating-system display scaling shifts the reported viewport again: a 1080p Windows laptop at 150% scaling behaves like a 1280 × 720 screen with a DPR of 1.5. The most reliable number is always the one your own browser reports, which is why the matching device above is detected live from your screen.