What is device pixel ratio?

DPR is the ratio between physical pixels and CSS pixels. A DPR of 2 (Retina) means each CSS pixel is rendered by 4 physical pixels.

Why is my resolution different from my screen specs?

Browser window size ≠ screen resolution. The window is usually smaller than the screen, and DPR scaling means CSS pixels differ from physical pixels.

What are Tailwind breakpoints?

sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px. Your layout changes at these widths in Tailwind CSS responsive design.

Developer Tool

Screen Resolution Tester

See your current browser window size, screen resolution, device pixel ratio, and which Tailwind breakpoint is active. Updates in real time on resize.

100% free — no account needed

0 x 0

Window Size

Screen Resolution

0 x 0

Device Pixel Ratio

Orientation

Landscape

Tailwind Breakpoint

xs0-639

sm640-767

md768-1023

lg1024-1279

xl1280-1535

2xl1536+

Device Matches

iPhone SE

375 x 667

iPhone 15

393 x 852

iPad

810 x 1080

MacBook Air

1440 x 900

1080p

1920 x 1080

1440p

2560 x 1440

3840 x 2160

Know Your Screen

Real-time browser and screen metrics

Live Updates

All values update instantly as you resize your browser window.

Device Matching

See which common devices match your current window size.

Tailwind Breakpoints

Know which Tailwind CSS breakpoint (sm/md/lg/xl/2xl) is currently active.

Pixel Ratio

See your device pixel ratio — important for retina/high-DPI displays.

FAQ

Developer Tools

Build Responsive Content

Test your responsive designs across devices.