A reference guide for standard screen resolutions, viewport pixel dimensions, and Device Pixel Ratios (DPR) across popular devices.
Standard CSS Media Query Breakpoints
/* Mobile devices */
@media (max-width: 639px) { ... }
/* Tablets & Small laptops */
@media (min-width: 640px) and (max-width: 1023px) { ... }
/* Desktops */
@media (min-width: 1024px) { ... }
/* Ultra-wide displays */
@media (min-width: 1536px) { ... }
Mobile Device Viewports & Pixel Density
| Device | CSS Viewport | Physical Resolution | DPR | Density |
|---|---|---|---|---|
| iPhone SE (3rd gen) | 375 x 667 | 750 x 1334 | @2x | 326 ppi |
| iPhone 13 / 14 / 15 | 390 x 844 | 1170 x 2532 | @3x | 460 ppi |
| iPhone 15 Pro Max | 430 x 932 | 1290 x 2796 | @3x | 460 ppi |
| Google Pixel 7 / 8 | 412 x 915 | 1080 x 2400 | @2.6x | 428 ppi |
| Samsung Galaxy S24 | 360 x 780 | 1080 x 2340 | @3x | 416 ppi |
Tablets & Laptops
| Device | CSS Viewport | Physical Resolution | DPR |
|---|---|---|---|
| iPad mini | 744 x 1133 | 1488 x 2266 | @2x |
| iPad Air / Pro 11" | 834 x 1194 | 1668 x 2388 | @2x |
| iPad Pro 12.9" | 1024 x 1366 | 2048 x 2732 | @2x |
| MacBook Air 13" M2 | 1470 x 956 | 2560 x 1664 | @2x |
| MacBook Pro 16" | 1728 x 1117 | 3456 x 2234 | @2x |
Desktop Display Standards
- Full HD (1080p): 1920 x 1080 (16:9)
- QHD / 2K (1440p): 2560 x 1440 (16:9)
- 4K UHD: 3840 x 2160 (16:9)
- Ultrawide QHD: 3440 x 1440 (21:9)