Your screen right now
Enable JavaScript to read your current viewport.
Browse by device type
Recent devices
| Device | CSS viewport | Native resolution | DPR | PPI | Year |
|---|---|---|---|---|---|
| iPhone 17e | 390 × 844 | 1170 × 2532 | 3× | 460 | 2026 |
| iPad Pro 13″ (M5) | 1032 × 1376 | 2064 × 2752 | 2× | 264 | 2026 |
| iPad Pro 11″ (M5) | 834 × 1210 | 1668 × 2420 | 2× | 264 | 2026 |
| iPad Air 13″ (M4) | 1024 × 1366 | 2048 × 2732 | 2× | 264 | 2026 |
| iPad Air 11″ (M4) | 820 × 1180 | 1640 × 2360 | 2× | 264 | 2026 |
| iPhone Air | 420 × 912 | 1260 × 2736 | 3× | 460 | 2025 |
| iPhone 17 Pro Max | 440 × 956 | 1320 × 2868 | 3× | 460 | 2025 |
| iPhone 17 Pro | 402 × 874 | 1206 × 2622 | 3× | 460 | 2025 |
| iPhone 17 | 402 × 874 | 1206 × 2622 | 3× | 460 | 2025 |
| iPhone 16e | 390 × 844 | 1170 × 2532 | 3× | 460 | 2025 |
| iPad Air 13″ (M3) | 1024 × 1366 | 2048 × 2732 | 2× | 264 | 2025 |
| iPad Air 11″ (M3) | 820 × 1180 | 1640 × 2360 | 2× | 264 | 2025 |
Every distinct CSS viewport width
All 242 devices in this database resolve to just 60 distinct CSS widths. This is the actual surface your responsive CSS has to cover.
Questions
What is the difference between screen resolution and viewport size?
Screen resolution is the number of physical pixels in the panel. The viewport is the area your CSS lays out into, measured in CSS pixels. On an iPhone 17 Pro the panel is 1206 × 2622 physical pixels, but CSS sees 402 × 874 — because the device pixel ratio is 3. Write CSS against the viewport; export images against the resolution.
What screen size should I design for?
For mobile, 390–430 px covers almost every current phone. For desktop, 1440 px is the most useful design width — wide enough to expose layout problems, narrow enough to fit a 1600 px monitor. Across the 242 devices here there are only 60 distinct CSS widths, so a handful of breakpoints covers the field.
What is device pixel ratio?
The number of physical pixels per CSS pixel. A 2× display packs four physical pixels into the area of one CSS pixel; a 3× display packs nine. It determines the multiplier for your image exports, nothing about your layout. Read it with window.devicePixelRatio.
How do I find my own screen size?
The panel at the top of this page reads it directly from your browser: CSS viewport, screen dimensions, device pixel ratio and the resulting native resolution.