Screen / Resolution
Work out screen dimensions, DPI, and PPI from a resolution — or the other way around.
W
× H
Common Resolutions
PPI
Common Densities
📐
Physical Dimensions
Width in
2050.8 cm
Height in
11.2528.575 cm
Diagonal in
22.946958.2853 cm
📊
Display Info
Pixel Density PPI
96Megapixels MP
2.0736Aspect Ratio
16:9Screen Preview (scaled)
1920 × 1080
16:9
Diagonal: 22.9469" at 96 PPI
Understanding DPI vs PPI
DPI (Dots Per Inch) — Used for printing; dots of ink per inch.
PPI (Pixels Per Inch) — Screen pixel density; pixels per inch on display.
For screens, DPI and PPI are often used interchangeably.
Features
- Calculate physical dimensions from resolution
- Convert DPI/PPI to screen size
- Aspect ratio calculator
- Pixel density (PPI) calculator
- Compare different screen resolutions
- Viewport size visualization
Common Use Cases
- Find physical size of a monitor from its resolution
- Calculate PPI for Retina display detection
- Determine aspect ratio for responsive design
- Compare phone screen densities
- Calculate viewing distance for optimal readability
Screen Resolution and Pixel Density
Screen resolution (width × height in pixels) combined with physical size determines pixel density (PPI)—a key factor in display quality and responsive design.
Key Concepts:
- Resolution: Number of pixels (e.g., 1920×1080, 2560×1440)
- PPI (Pixels Per Inch): Pixel density—higher PPI = sharper display
- Aspect Ratio: Width:Height ratio (16:9, 21:9, 4:3)
- Device Pixel Ratio (DPR): Physical pixels per CSS pixel (1×, 2×, 3×)
Common Resolutions:
- HD (1280×720): 720p, budget monitors and TVs
- Full HD (1920×1080): 1080p, standard for most displays
- QHD/2K (2560×1440): 1440p, high-end monitors
- 4K UHD (3840×2160): 2160p, premium displays and TVs
- Mobile: 390×844 (iPhone), 412×915 (Android typical)
PPI Categories:
- Low (~90-120 PPI): Standard desktop monitors, visible pixels
- Retina (~220-260 PPI): Apple displays, imperceptible pixels at normal distance
- High (~300-450 PPI): Modern smartphones, very sharp
- Ultra (~500+ PPI): Flagship phones, VR headsets
DPI vs PPI: DPI (Dots Per Inch) is for printers; PPI (Pixels Per Inch) for screens. The terms are often used interchangeably, but PPI is technically correct for displays.
Examples
Valid - 27-inch 4K Monitor
3840×2160 @ 27" = 163 PPI Valid - iPhone 14
1170×2532 @ 6.1" = 460 PPI Valid - Standard Laptop
1920×1080 @ 15.6" = 141 PPIFrequently Asked Questions
What's a good PPI for a monitor?
For desktop monitors at 20-30 inches distance, 110-140 PPI is comfortable. Higher (160-220 PPI) is sharper but requires UI scaling. For laptops, 140-180 PPI is ideal. Phones need 300+ PPI for sharp text at close distance.
How is PPI calculated?
PPI = √(width² + height²) ÷ diagonal size. For a 27" 4K monitor: √(3840² + 2160²) ÷ 27 ≈ 163 PPI. Higher PPI means sharper images and text.
What is device pixel ratio (DPR)?
DPR is physical pixels per CSS pixel. A 2× Retina display uses 4 physical pixels (2×2) for each CSS pixel. This maintains consistent visual size while increasing sharpness. Check with window.devicePixelRatio in JavaScript.
Why do phones have much higher PPI than monitors?
Viewing distance! Phones are held 10-12 inches from eyes, monitors 20-30 inches away. To look equally sharp, phones need ~300-400 PPI while monitors need only ~110-140 PPI. It's about perceived sharpness, not absolute PPI.
What's the difference between 2K and 4K?
2K (2560×1440) has ~3.7M pixels; 4K (3840×2160) has ~8.3M pixels—more than double. 4K is sharper but requires more GPU power. For monitors <27", the difference is subtle. For 32"+, 4K is noticeably better.
Tips
- For responsive design, test at 375×667 (mobile), 1366×768 (laptop), 1920×1080 (desktop)
- Retina detection: if devicePixelRatio ≥ 2, serve 2× resolution images (@2x suffix)
- Common aspect ratios: 16:9 (widescreen), 21:9 (ultrawide), 4:3 (old monitors), 16:10 (MacBook)
- Calculate image file size: width × height × 3 bytes (RGB) or × 4 bytes (RGBA)