Common breakpoints

Mobile
< 768px

Tablet
768–1024px

Desktop
> 1024px

HD
1280px

Full HD
1920px

4K
3840px

About the Screen Resolution Tester

What it detects

Displays your screen's physical resolution, colour depth, pixel ratio (for HiDPI/Retina displays), and available viewport dimensions — all read directly from your browser without any software installation.

Why it matters

Screen resolution affects how websites, images, and apps are rendered. Knowing your display's specs is useful for web development, graphic design, testing responsive layouts, and buying accessories.

Resolution — total pixels: width × height (e.g. 1920 × 1080)
Device pixel ratio — on Retina/HiDPI screens this is 2× or more; CSS pixels ≠ physical pixels
Colour depth — bits per pixel; 24-bit (16M colours) is standard for modern displays
Viewport — the visible browser area, smaller than full screen resolution

Screen resolution and responsive design

Device pixel ratio (DPR) is the ratio between physical pixels and CSS pixels. A DPR of 2 (Retina/HiDPI) means 4 physical pixels per CSS pixel, producing sharper images. For web images, serving a 2x image (srcset) on high-DPR screens prevents blurriness without wasting bandwidth on standard displays.

srcset attribute — provide 1x and 2x image versions: srcset="img.jpg 1x, [email protected] 2x"
CSS media query — target HiDPI: @media (-webkit-min-device-pixel-ratio: 2)
SVGs — resolution-independent by nature; always sharp at any DPR without extra versions
Canvas API — multiply canvas dimensions by devicePixelRatio and scale via CSS for sharp canvas graphics on HiDPI screens

Frequently Asked Questions

What is device pixel ratio?

Device Pixel Ratio (DPR) is the ratio of physical pixels to CSS pixels. A DPR of 2 means a Retina or HiDPI display — 2 physical pixels for every 1 CSS pixel. This affects image quality on high-density screens.

What is viewport vs screen resolution?

Screen resolution is the total physical display size. Viewport is the visible area of your browser window, which changes as you resize the window or zoom in/out.

What is the difference between screen resolution and viewport size?

Screen resolution is the total number of physical pixels your display has (e.g. 1920×1080). Viewport size is the area of the browser window available for web content, which is smaller — it excludes browser toolbars, scrollbars, and the OS taskbar.

What does device pixel ratio (DPR) mean?

DPR is the ratio of physical pixels to CSS pixels. A DPR of 2 (Retina/HiDPI) means 4 physical pixels (2×2) render each CSS pixel. This produces sharper text and images on high-resolution displays.

Why does my screen resolution look different in this tool vs my system settings?

Operating systems often scale display resolution for readability. A 4K monitor may report as 1920×1080 to applications because the OS applies 200% scaling. This tool reports what the browser sees (after OS scaling), which is the resolution that matters for web design.