No Login Data Private Local Save

Viewport & Document Size Viewer - Online Real‑Time

7
0
0
0
Copied! ✓
Real‑Time Monitoring Active
Viewport window.inner
-- px wide × -- px tall
-- aspect ratio
Document scroll dimensions
-- px wide × -- px tall
-- aspect ratio
Viewport Position in Document
scroll to see the viewport move
Top: 0% Left: 0% Doc: --

Screen

--

Resolution

DPR

--

Device Pixel Ratio

Scroll

--

px from top/left

Scrollbar

--

Scrollbar width (if visible)
Vertical Scroll 0%
scrolled 0 of 0 px
Horizontal Scroll 0%
scrolled 0 of 0 px
📐 Document-to-Viewport Ratio: -- wide -- tall --

Frequently Asked Questions

What is the difference between Viewport Size and Document Size?
Viewport Size is the visible area of your browser window — what you can actually see without scrolling. It corresponds to window.innerWidth and window.innerHeight (including scrollbars). Document Size is the total size of the HTML document, including content that extends beyond the visible area. It's accessed via document.documentElement.scrollWidth and scrollHeight. When a page has no scrollable content, the document size equals the viewport size.
Why does my Document Size keep changing?
Document size can change dynamically due to images loading, JavaScript injecting content, lazy-loaded elements, collapsible sections expanding, or CSS animations. Our tool uses a ResizeObserver to detect these changes in real time, ensuring you always see the most up-to-date measurements. This is especially useful for debugging responsive layouts and dynamic web applications.
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 a device. For example, a Retina MacBook has a DPR of 2, meaning each CSS pixel corresponds to 2×2 physical pixels. A 4K monitor might have a DPR of 1.5 or 2 depending on OS scaling settings. DPR affects image sharpness, canvas rendering, and how media queries work. Knowing your DPR helps optimize images (using srcset) and ensures crisp graphics on high-DPI screens.
How is scrollbar width calculated?
Scrollbar width is calculated as: window.innerWidth - document.documentElement.clientWidth. On macOS with overlay scrollbars, this value is typically 0px because scrollbars float above the content. On Windows and Linux, classic scrollbars usually occupy 15–17px. This measurement is crucial for front-end developers to avoid layout shifts when scrollbars appear or disappear.
Why is my viewport size different from my screen resolution?
Your screen resolution (e.g., 1920×1080) is the total pixel area of your monitor. The viewport size is smaller because: (1) the browser window usually isn't maximized to full screen, (2) browser UI elements (tabs, address bar, bookmarks) consume space, and (3) the operating system's taskbar or dock takes up space. On mobile devices, the viewport is further affected by the on-screen keyboard and browser chrome.
How can I use this tool for responsive web design testing?
This tool helps you quickly verify breakpoints in your responsive designs. Resize your browser window and watch the viewport dimensions update in real time — when the width matches common breakpoints (576px, 768px, 992px, 1200px, 1400px for Bootstrap), you can check how your layout responds. The Document Size reading helps identify overflow issues — if the document is wider than the viewport, you have horizontal overflow that needs fixing.
What are common viewport sizes I should design for?
Based on global usage statistics, the most common viewport widths are: Mobile – 360–414px (iPhone, Samsung Galaxy); Tablet – 768–1024px (iPad); Desktop – 1366–1920px (laptops and monitors). Bootstrap's default breakpoints (sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px) cover these ranges well. Use this tool to see exactly where your current window falls.
🔧 Related Tools