Viewport & DPR Checker

Check viewport size, device pixel ratio, and screen dimensions. Useful for responsive design testing.

Viewport Information

Window Width
0
pixels
Window Height
0
pixels
Screen Width
0
pixels
Screen Height
0
pixels
Device Pixel Ratio (DPR)
0.00
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.

What It Does

A Viewport & DPR Checker is a developer tool that displays real-time information about your browser's viewport dimensions, device pixel ratio (DPR), and screen resolution. The viewport is the visible area of a web page in the browser window, and understanding its dimensions is crucial for responsive web design. The tool shows width and height in pixels, detects high-DPI (retina) displays through device pixel ratio, and updates values in real-time as you resize the browser window. This information is essential for testing responsive breakpoints, debugging layout issues, understanding media query behavior, and ensuring designs work correctly across different screen sizes. Perfect for web developers, designers, and anyone working on responsive websites.

Key Features:

  • Real-time viewport width and height display
  • Device pixel ratio (DPR) detection for retina displays
  • Screen resolution information
  • Live updates as browser window is resized
  • Media query breakpoint indicators
  • Responsive design testing capabilities
  • Browser and device information
  • Useful for debugging layout issues

How To Use

The Viewport Checker automatically displays your current viewport information. Simply open the tool to see all measurements.

1

Open the Tool

Open the Viewport Checker tool to see your current viewport dimensions, device pixel ratio, and screen resolution displayed immediately.

2

View Viewport Dimensions

See the current viewport width and height in pixels. This is the visible area of your browser window, excluding scrollbars and browser chrome.

3

Check Device Pixel Ratio

View the device pixel ratio (DPR), which indicates if you're on a high-DPI (retina) display. DPR of 1 is standard, 2 or higher indicates retina/high-DPI.

4

Resize Browser Window

Resize your browser window to see the viewport dimensions update in real-time. This helps you test responsive breakpoints and see how your site behaves at different sizes.

5

Use for Testing

Use the information for responsive design testing, debugging layout issues, or understanding which CSS media queries would activate at current viewport size.

Pro Tips

  • •Viewport width is crucial for responsive breakpoints (mobile: <768px, tablet: 768-1024px, desktop: >1024px)
  • •Device pixel ratio helps understand image resolution needs (DPR 2 means images should be 2x resolution)
  • •Resize browser to test how your site looks at different viewport sizes
  • •Use for debugging why media queries aren't working as expected
  • •Check DPR to ensure images are sharp on high-DPI displays
  • •Viewport excludes browser UI, so it's smaller than screen resolution

Benefits

Responsive Testing: Quickly see viewport dimensions for responsive design testing
Debugging: Identify viewport-related layout issues and media query problems
Real-Time Updates: See dimensions change instantly as you resize the browser
DPR Detection: Understand if you're on a retina display for image optimization
Breakpoint Testing: Verify which CSS breakpoints would activate at current size
Development Tool: Essential information for frontend development
No Installation: Works directly in browser without extensions
Accurate Measurements: Get precise viewport and screen information

Use Cases

Responsive Design Testing

Test how websites respond to different viewport sizes. Verify breakpoints and media queries work correctly.

Resize browser to 375px width to test mobile layout, check if mobile styles activate correctly

Media Query Debugging

Understand why media queries aren't working. See exact viewport dimensions to match with CSS breakpoints.

Check viewport is 768px to verify @media (min-width: 768px) should activate

High-DPI Display Testing

Check device pixel ratio to ensure images and graphics look sharp on retina displays.

Verify DPR is 2 on MacBook to ensure 2x resolution images are needed for sharp display

Layout Debugging

Debug layout issues by understanding exact viewport dimensions and how they affect CSS layouts.

Check viewport height to understand why fixed-height elements aren't displaying correctly

Breakpoint Planning

Plan responsive breakpoints by testing actual viewport sizes on different devices and browsers.

Test common device sizes (375px, 768px, 1024px, 1920px) to plan breakpoint strategy

Frequently Asked Questions

1 What is the difference between viewport and screen resolution?
Viewport is the visible area of the web page in the browser window, which excludes browser UI elements like address bar, bookmarks, etc. Screen resolution is the total number of pixels on your physical display. For example, a screen might be 1920x1080 pixels, but the viewport might be 1920x1040 pixels (accounting for browser chrome). Viewport is what matters for CSS and responsive design.
2 What is device pixel ratio (DPR) and why does it matter?
Device pixel ratio (DPR) is the ratio between physical pixels and CSS pixels. On standard displays, DPR is 1 (1 physical pixel = 1 CSS pixel). On high-DPI/retina displays, DPR is typically 2 or 3 (2-3 physical pixels = 1 CSS pixel). This means images need to be 2x or 3x resolution to look sharp. For example, a 100x100 CSS image needs to be 200x200 pixels on a DPR 2 display.
3 How do I use viewport information for responsive design?
Use viewport width to determine which CSS media queries should activate. Common breakpoints: mobile (< 768px), tablet (768px - 1024px), desktop (> 1024px). Test your site at these viewport sizes to ensure layouts work correctly. The Viewport Checker shows you the exact width so you can verify your media queries match expected breakpoints.
4 Why does my viewport size differ from my screen resolution?
Viewport is smaller than screen resolution because it excludes browser UI (address bar, bookmarks bar, etc.) and may be affected by browser zoom level. Also, on high-DPI displays, CSS pixels are smaller than physical pixels. For example, a 1920x1080 screen with DPR 2 has a CSS viewport of 960x540 pixels. The Viewport Checker shows the actual CSS viewport size that your CSS sees.
5 Can I use this tool on mobile devices?
Yes, the Viewport Checker works on mobile devices and will show the mobile viewport dimensions. This is particularly useful for testing responsive designs and understanding how your site appears on actual mobile devices. Mobile viewports are typically smaller (320px-414px width for phones) and may have different DPR values.
6 How do I test different viewport sizes?
You can resize your browser window manually, or use browser developer tools (F12) which have responsive design mode that lets you simulate different device viewports. The Viewport Checker will update in real-time as you change the window size, showing you the exact dimensions at each size. This helps you test all your responsive breakpoints.

Related Tools

Media Query Generator

Generate responsive media queries with breakpoints. Create mobile-first responsive designs with proper breakpoints.

Color Contrast Checker

Check color contrast ratios for WCAG accessibility compliance. Ensure readable text and accessible design.

Color Picker & Converters

Pick colors and convert between HEX, RGB, HSL, and HSV formats. Visual color picker for designers and developers.

Palette / Gradient Generator

Generate color palettes and CSS gradients. Create harmonious color schemes for web design and branding.

CSS Snippet Generator

Generate CSS code for shadows, gradients, borders, and effects. Visual CSS code generator for faster development.

Simple Favicon Generator

Create simple favicons for your website. Generate ICO files from text or colors quickly.