Detect Screen Resolution: DPI, Viewport & Pixel Ratio

Understanding screen resolution

Screen resolution refers to the number of pixels your display can show, expressed as width x height (e.g., 1920x1080). Higher resolutions mean more pixels and sharper images. Understanding your screen resolution is important for choosing wallpapers, optimizing images, designing responsive websites, and troubleshooting display issues.

Physical resolution vs CSS pixels

Modern devices use two different pixel measurements:

Physical (hardware) pixels: the actual pixels on your screen. A 4K monitor has 3840x2160 physical pixels
CSS (logical) pixels: the pixels used in web design. On a 4K screen at 200% scaling, CSS resolution is 1920x1080

The ratio between physical and CSS pixels is the device pixel ratio (DPR). A DPR of 2 means each CSS pixel maps to a 2x2 grid of physical pixels.

What is DPI and why does it matter?

DPI (dots per inch) measures pixel density — how many pixels fit in one inch of screen. Higher DPI means sharper, more detailed images:

72-96 DPI: standard desktop monitors
150-200 DPI: high-resolution laptops (Retina-class)
300+ DPI: modern smartphones

For responsive design, DPI determines which image resolution to serve: standard images for 96 DPI screens, 2x images for retina displays.

How to check your screen resolution

The fastest way is to use our screen resolution detector, which instantly shows your physical resolution, CSS resolution, device pixel ratio, and viewport size.

You can also check manually:

Windows: Settings > Display > Display resolution
macOS: Apple menu > About This Mac > Displays
Chrome DevTools: press F12, the viewport size appears in the top-right corner of the responsive mode

Viewport size for web design

The viewport is the visible area of a web page in the browser. It's smaller than the screen resolution because of browser chrome (address bar, bookmarks bar, etc.).

Common viewport breakpoints for responsive design:

320-480 px: smartphones (portrait)
481-768 px: tablets (portrait)
769-1024 px: tablets (landscape) and small laptops
1025-1200 px: desktops
1201+ px: large desktops and wide screens

Common screen resolutions in 2025

The most popular resolutions according to global statistics:

1920x1080 (Full HD): ~23% of desktop users
1366x768: ~15% (older laptops)
2560x1440 (QHD): ~10% (gaming monitors)
3840x2160 (4K UHD): ~5% (premium monitors)
390x844: iPhone 14/15 standard
412x915: common Android phones

Resolution and responsive web design

For web developers, understanding resolution helps create better responsive designs:

Use CSS media queries to adapt layouts to different viewport widths
Serve responsive images with srcset to match device pixel ratios
Test on multiple resolutions to ensure your design works everywhere
Use relative units (em, rem, %) instead of fixed pixels for flexible layouts

Try our free tools

🖥️ Screen Resolution

Frequently Asked Questions

How do I find my screen resolution?

Use our free screen resolution detector tool. It instantly shows your physical resolution, CSS resolution, device pixel ratio, and viewport size directly in your browser.

What is device pixel ratio?

Device pixel ratio (DPR) is the ratio between physical pixels and CSS pixels. A DPR of 2 (common on retina displays) means each CSS pixel is rendered using 4 physical pixels (2x2 grid).

What resolution should I design for?

Start with mobile-first design at 375px width, then add breakpoints at 768px (tablet), 1024px (laptop), and 1440px (desktop). Always use responsive CSS rather than targeting specific resolutions.

What is the difference between resolution and viewport?

Resolution is the total number of pixels on your screen. Viewport is the visible area of the web page in the browser, which is typically smaller due to browser UI elements like the address bar.