How to Use the Screen Resolution Calculator

Detect your screen — click Detect to automatically read your device's current resolution and pixel density.
Enter custom dimensions — manually enter any resolution to calculate PPI (pixels per inch) and other properties.
Enter screen size — diagonal screen size in inches, required to calculate PPI from resolution.
Read PPI and display class — see pixels per inch and whether the display qualifies as Retina/HiDPI.
Compare resolutions — the calculator shows how common display standards compare to your screen.

📺 PPI matters for perception: The human eye cannot distinguish individual pixels above approximately 300 PPI at normal viewing distance (30cm/12 inches). Apple coined 'Retina display' for screens exceeding this threshold — pixels become imperceptible. Smartphone screens at 400-500 PPI far exceed this threshold. Desktop monitors at 100-160 PPI are below it — individual pixels are sometimes visible, especially for text.

Understanding Screen Resolutions

📊 Common Resolutions

HD: 1280×720 (720p). Full HD: 1920×1080 (1080p). QHD/2K: 2560×1440 (1440p). 4K UHD: 3840×2160. 8K: 7680×4320. iPhone 15 Pro: 2556×1179 (460 PPI). MacBook Pro 14": 3024×1964 (254 PPI). These resolutions represent the pixel grid — more pixels produce sharper images.

🔢 What Is PPI?

Pixels Per Inch — how many pixels fit in one inch of screen. PPI = √(width² + height²) / diagonal screen size in inches. A 27-inch 1080p monitor: √(1920²+1080²)/27 = √(4,665,600)/27 = 2160/27 = 81.6 PPI (low clarity). A 27-inch 4K monitor: √(3840²+2160²)/27 = 163 PPI (good clarity). More PPI = sharper image.

🍎 Retina Display

Apple's marketing term for displays where pixels are imperceptible at normal use distance. iPhone Retina: >300 PPI (held ~30cm away). MacBook Retina: >200 PPI (used ~50cm away). iMac Retina: >100 PPI (used ~80cm away). The threshold changes with viewing distance — a 100 PPI TV is fine at 2 metres but poor at 50cm. Same principle, different distance.

💻 Display Scaling

High-DPI displays use scaling to make content readable. A 4K monitor at 100% scaling shows everything tiny (physical pixels). At 200% scaling (Retina mode): macOS renders at 2× pixel density, showing content at same physical size as 1080p but with 4× the sharpness. Windows calls this DPI scaling. Web developers must handle HiDPI with CSS device-pixel-ratio media queries and high-resolution image assets.

🎮 Gaming Resolution Impact

Higher resolution requires more GPU power. 1080p gaming: runs smoothly on mid-range GPU. 1440p: requires mid-to-high GPU. 4K: requires high-end GPU. Resolution directly impacts frame rate — dropping from 4K to 1440p can increase FPS by 40-50% on the same GPU. Gamers often prefer higher frame rate at lower resolution over lower frame rate at higher resolution for competitive play.

📱 Mobile Resolution

Modern smartphones have resolutions of 1080×2400 or higher on 6-inch screens — producing 400+ PPI. This far exceeds the human perception threshold. The high PPI enables crisp text at small font sizes and high-detail photography. However, actual rendering resolution is often half the physical resolution (logical pixels) due to OS scaling — the hardware resolution is used for anti-aliasing to improve perceived sharpness.

Screen Resolution in Design and Development

Designing for multiple resolutions

Web and app designers must target screens from 320px wide (small phones) to 3840px wide (4K monitors) — a 12× range. Responsive design handles this through: fluid grids (percentage widths rather than fixed pixels), flexible images (max-width: 100%), and media query breakpoints that adjust layout at common device widths. The standard breakpoints: 320–480px (mobile), 481–768px (large mobile/small tablet), 769–1024px (tablet), 1025–1200px (small desktop), 1201px+ (large desktop). Understanding actual device resolutions helps choose appropriate breakpoints.

HiDPI images for sharp displays

On Retina/HiDPI displays, a standard 1× image appears blurry because each logical pixel maps to 4 physical pixels. Solution: provide 2× resolution images (srcset 2x) for high-density displays, or use SVG (infinitely scalable vector format) for graphics and logos. CSS media query for HiDPI: `@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)`. Failing to provide HiDPI assets makes logos and graphics look blurry on Retina Macs and high-end smartphones.

Video resolution for different screens

Upload video at the highest resolution you have — platforms (YouTube, Vimeo) transcode to multiple resolutions for different viewers. For your own web video, 1080p is sufficient for most desktop and mobile viewers. 4K video is only meaningful on 4K displays and requires significantly more bandwidth. Adaptive bitrate streaming (HLS, DASH) automatically selects the appropriate resolution based on viewer connection speed and screen size — the standard for professional video delivery.

📺 Resolution quick reference: 720p (1280×720): HD, streaming minimum quality. 1080p (1920×1080): Full HD, standard quality. 1440p (2560×1440): 2K/QHD, excellent clarity. 4K (3840×2160): UHD, maximum clarity for large screens. For web images: design at 2× physical display size for Retina sharpness. For video: always use 1080p minimum; offer 4K for flagship content.

Frequently Asked Questions

What is screen resolution?

Screen resolution is the number of pixels displayed on a screen, expressed as width × height (e.g., 1920×1080). Higher resolution means more pixels, resulting in sharper images. Modern displays range from 1280×720 (HD) to 7680×4320 (8K UHD).

What is PPI (pixels per inch)?

PPI measures pixel density — how many pixels fit in one inch of screen. Higher PPI = sharper display. Apple's Retina displays have PPI above 220, making individual pixels invisible at normal viewing distance. Smartphone screens typically range from 300–600 PPI.

What is the difference between resolution and screen size?

Screen size (in inches) measures the diagonal of the physical display. Resolution measures how many pixels it contains. A small high-resolution screen can appear sharper than a large low-resolution screen. PPI combines both measurements to indicate actual sharpness.

What resolution should I design for?

Web design: design at 1440px wide as the standard desktop breakpoint. Mobile: design at 375–390px wide (scales up for retina). Export assets at 2× or 3× for high-DPI screens. The most common screen resolution globally is still 1366×768 (older laptops) followed by 1920×1080.