Viewport & DPR Checker

Check viewport dimensions and device pixel ratio

Check your current viewport width, height, device pixel ratio (DPR), and screen resolution. Perfect for responsive web design testing, understanding media query breakpoints, or debugging layout issues on different devices. See live updates as you resize your browser window.

Viewport Information

Window Width
-
pixels
Window Height
-
pixels
Screen Width
-
pixels
Screen Height
-
pixels
Device Pixel Ratio (DPR)
-
display density
Orientation
-
landscape / portrait

Breakpoint Detection

Extra Small (xs)
< 640px
Small (sm)
≥ 640px
Medium (md)
≥ 768px
Large (lg)
≥ 1024px
Extra Large (xl)
≥ 1280px
2X Large (2xl)
≥ 1536px

About Device Pixel Ratio

DPR 1.0: Standard displays (typical desktop monitors)

DPR 2.0: Retina displays (MacBook Pro, iPhone, modern Android phones)

DPR 3.0+: High-end mobile displays (iPhone Pro, Samsung Galaxy S-series)

💡 Tip: Higher DPR means sharper images. Use responsive images with srcset for better quality on retina displays.

How to Use

  1. 1 Open the tool to see your current viewport dimensions
  2. 2 View width, height, and device pixel ratio (retina detection)
  3. 3 Resize browser window to see values update in real-time
  4. 4 Check which CSS media query breakpoints would activate
  5. 5 Use for responsive design testing, debugging, or device detection