Device Screen Sizes & CSS Viewports
Instant reference database for frontend engineers, UI/UX designers, and QA testers. Lookup verified CSS logical widths, native hardware resolutions, Device Pixel Ratios (DPR), and copy-paste ready media query snippets.
iPhone 16 Pro
The iPhone 16 Pro features a 6.3-inch Super Retina XDR OLED display with a CSS viewport of 402 x 874 logical pixels at a 3x Device Pixel Ratio (DPR).
iPhone 16 Pro Max
The iPhone 16 Pro Max boasts the largest iPhone display ever at 6.9 inches, delivering a CSS viewport of 440 x 956 logical pixels at 3x DPR.
iPhone 16
The standard iPhone 16 features a 6.1-inch OLED screen with a logical resolution of 393 x 852 CSS pixels at 3x DPR.
iPhone 15 Pro
The iPhone 15 Pro features a 6.1-inch Super Retina display with 393 x 852 CSS viewport pixels and 3x DPR.
iPhone 14 / 13 / 12
The iPhone 14, 13, and 12 base models share the classic notch design with a CSS viewport of 390 x 844 pixels at 3x DPR.
iPhone SE (3rd Gen)
The iPhone SE (3rd Gen) retains the traditional home button form factor with a 375 x 667 CSS viewport and 2x DPR.
Samsung Galaxy S24 Ultra
The Samsung Galaxy S24 Ultra features a 6.8-inch Dynamic AMOLED 2X panel with a default logical viewport of 384 x 824 CSS pixels at 3.75x DPR.
Samsung Galaxy S24
The Samsung Galaxy S24 provides a compact 6.2-inch display rendering at 360 x 780 CSS pixels with 3x DPR.
Google Pixel 8 Pro
Google Pixel 8 Pro features a 6.7-inch Super Actua display with 412 x 892 CSS logical pixels at 3.25x DPR.
iPad Pro 12.9" (M2 / M4)
The iPad Pro 12.9-inch offers desktop-class canvas space with 1024 x 1366 CSS pixels in portrait and 1366 x 1024 in landscape at 2x DPR.
iPad Pro 11" (M2 / M4)
The iPad Pro 11-inch features an edge-to-edge Liquid Retina display rendering at 834 x 1194 CSS pixels at 2x DPR.
iPad Air 10.9"
The 10.9-inch iPad Air has a CSS viewport of 820 x 1180 pixels at 2x DPR.
MacBook Pro 16"
Apple MacBook Pro 16-inch Liquid Retina XDR screen renders at a default scaled CSS resolution of 1728 x 1117 pixels with 2x DPR.
MacBook Air 13" (M2 / M3)
The MacBook Air 13.6-inch display runs at an effective default CSS viewport of 1470 x 956 pixels at 2x DPR.
Desktop Full HD (1080p)
Full HD 1920 x 1080 is the global baseline standard for desktop monitors and gaming displays, representing the most common web browsing resolution.
Desktop Quad HD (1440p / 2K)
Quad HD (QHD / 2560 x 1440) is the preferred standard for software developers, productivity monitors, and creative workstations.
Desktop 4K Ultra HD
4K Ultra HD offers 3840 x 2160 native resolution. When run at 150% or 200% OS scaling, effective CSS viewports range between 1920px and 2560px.
Apple Watch Ultra 2 (49mm)
Apple Watch Ultra 2 has a 49mm case with a 205 x 251 CSS pixel canvas and 2x retina display.
Standard CSS Responsive Breakpoint Guidelines
Industry benchmark breakpoints mapped across frameworks
| Tier | Width Range | Tailwind Class | Target Devices |
|---|---|---|---|
| Extra Small / Mobile | < 640px | default (no prefix) | iPhone 16, Galaxy S24, Pixel 8 (360px - 440px) |
| Small | ≥ 640px | sm: | Large phablets, landscape smartphones |
| Medium / Tablet | ≥ 768px | md: | iPad Air, iPad mini, Android tablets (768px - 834px) |
| Large / Small Laptop | ≥ 1024px | lg: | iPad Pro 12.9" landscape, compact laptops (1024px) |
| Extra Large / Desktop | ≥ 1280px | xl: | MacBook Air 13", standard desktop monitors |
| 2X Large / Ultrawide | ≥ 1536px | 2xl: | MacBook Pro 16", 1080p, 1440p, and 4K displays |
Frequently Asked Questions About Screen Resolutions & Viewports
Frequently Asked Questions
Everything you need to know regarding specifications, syntax, and security best practices.
Physical pixels are the physical microscopic light-emitting diodes (LEDs/OLEDs) fabricated on a display glass. CSS pixels (logical pixels) are the abstract coordinate system used by web browsers. On high-density Retina displays, multiple physical pixels are grouped to render a single CSS pixel (determined by the Device Pixel Ratio, e.g. 2x, 3x, or 3.75x).