In web development and design, knowing the exact dimensions of your viewing area is critical. This tool provides a live, real-time analysis of your browser's Viewport (the actual visible webpage area) and your physical Screen Resolution.
Unlike simple static checkers, this tool reacts instantly as you resize your browser window, making it perfect for testing responsive breakpoints without opening Chrome DevTools. It also detects high-density displays (Retina) and calculates your device's aspect ratio.
Key Metrics Explained
- Viewport Size: The width and height of the browser window's content area. This is the exact dimension that CSS Media Queries respond to (e.g.,
@media (max-width: 768px)).
- Screen Resolution: The total pixel dimensions of your physical monitor or mobile screen.
- Device Pixel Ratio (DPR): This indicates pixel density. A value of 2.0 or higher means you are using a HiDPI or Retina display, where one CSS pixel equals multiple physical pixels.
- Available Work Area: The screen resolution minus the operating system's UI elements, such as the Windows Taskbar or macOS Dock.
Frequently Asked Questions
What is the difference between Viewport and Screen Resolution?
Screen Resolution is the physical size of your monitor (e.g., 1920x1080). Viewport is the size of the browser window inside that screen. The viewport is almost always smaller because it excludes browser toolbars, scrollbars, and OS taskbars.
Why does my 4K monitor show as a smaller resolution?
This is due to Display Scaling (DPR). Operating systems scale interfaces so text remains readable. A 4K monitor (3840x2160) with 200% scaling effectively behaves like a 1920x1080 screen in CSS pixels. This tool shows the "CSS Pixel" value because that is what websites use for layout.
What is Device Pixel Ratio (DPR)?
DPR is the ratio between physical screen pixels and logical CSS pixels. Standard monitors have a DPR of 1. Retina displays (like iPhones and MacBooks) usually have a DPR of 2 or 3, meaning images need to be 2x or 3x larger to look sharp.
Does browser zoom affect these numbers?
Yes! Zooming in (e.g., Ctrl +) effectively decreases your viewport width in CSS pixels because content takes up more space. Zooming out increases the viewport width. This tool updates instantly when you zoom.
What are standard responsive breakpoints?
While every site is different, common standards are:
• Mobile: < 576px
• Tablet: 768px - 991px
• Desktop: > 992px
• Wide: > 1200px
