Screen Resolutions Cheatsheet

Display resolutions, DPI & pixel density reference

Reference
Contents
🖥️

Standard Resolutions

Name         Width  Height  Pixels(M)
VGA           640    480     0.3
SVGA          800    600     0.5
XGA          1024    768     0.8
HD (720p)    1280    720     0.9
WXGA         1366    768     1.0
HD+          1600    900     1.4
FHD (1080p)  1920   1080     2.1
WUXGA        1920   1200     2.3
QHD (1440p)  2560   1440     3.7
WQHD+        3440   1440     5.0
4K UHD       3840   2160     8.3
5K           5120   2880    14.7
8K UHD       7680   4320    33.2
📱

Mobile Devices

Device                Resolution   PPI    Scale
iPhone SE             1334 × 750   326    @2x
iPhone 14             2532 × 1170  460    @3x
iPhone 14 Pro         2556 × 1179  460    @3x
iPhone 14 Pro Max     2796 × 1290  460    @3x
iPhone 15 Pro         2556 × 1179  460    @3x
iPhone 15 Pro Max     2796 × 1290  460    @3x
Samsung S24           2340 × 1080  416    3x
Samsung S24 Ultra     3120 × 1440  505    4x
Pixel 8               2400 × 1080  428    2.5x
Pixel 8 Pro           2992 × 1344  489    3.5x
🍎

Apple Devices

Device                Res (native)     Scale  Logical
MacBook Air 13" M2    2560 × 1664      @2x    1280 × 832
MacBook Air 15" M2    2880 × 1864      @2x    1440 × 932
MacBook Pro 14"       3024 × 1964      @2x    1512 × 982
MacBook Pro 16"       3456 × 2234      @2x    1728 × 1117
iMac 24"              4480 × 2520      @2x    2240 × 1260
Pro Display XDR       6016 × 3384      @2x    3008 × 1692
iPad 10th gen         2360 × 1640      @2x    1180 × 820
iPad Air M2           2360 × 1640      @2x    1180 × 820
iPad Pro 11" M4       2420 × 1668      @2x    1210 × 834
iPad Pro 13" M4       2752 × 2064      @2x    1376 × 1032
Apple Watch Ultra     502 × 410        @2x    251 × 205
🔍

DPI & Pixel Density

DPI    Density    CSS Ratio    Usage
 72    1x (ldpi)  1            Old Mac
 96    1x (mdpi)  1            Windows std
144    1.5x       1.5          Some Android
160    1x         1            Android mdpi
192    2x         2            Android xhdpi
240    2.5x       2.5          Android
320    2x         2            Retina @2x
326    2x         2            iPhone std
401    ~3x        3            iPhone Plus
460    3x         3            iPhone Pro
570    3.5x       3.5          Modern flagship

/* CSS media query for Retina */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  /* high-DPI styles */
}
📊

CSS Breakpoints

/* Tailwind CSS defaults */
sm:   640px     Small devices
md:   768px     Medium (tablets)
lg:   1024px    Large (laptops)
xl:   1280px    Extra large
2xl:  1536px    2XL screens

/* Bootstrap 5 defaults */
sm:   576px
md:   768px
lg:   992px
xl:   1200px
xxl:  1400px

/* Mobile-first media queries */
@media (min-width: 640px)  { /* sm */ }
@media (min-width: 768px)  { /* md */ }
@media (min-width: 1024px) { /* lg */ }
@media (min-width: 1280px) { /* xl */ }
🎯

Icon Sizes

Platform        Sizes (px)
Favicon         16, 32, 48, 64
Apple Touch     180 × 180
Android         48, 72, 96, 144, 192, 512
iOS App Icons   20, 29, 40, 58, 60, 76, 80,
                87, 120, 152, 167, 180, 1024
macOS App       16, 32, 64, 128, 256, 512, 1024
Google Play     512 × 512
App Store       1024 × 1024
PWA Manifest    192, 512
Microsoft       44, 50, 150, 310
Twitter Card    120 × 120 min
Open Graph      1200 × 630