Viewport & screen dimensions · real‑time
Founder & CEO, Toolraxy
Faiq Ur Rahman is a web designer, digital product developer, and founder of Toolraxy, a growing platform of web-based calculators and utility tools. He specializes in building structured, user-friendly tools focused on health, finance, productivity, and everyday problem-solving.
User Ratings:
ADVERTISEMENT
ADVERTISEMENT
This is a lightweight, browser-based utility that displays detailed information about your current window and screen dimensions. It reads native JavaScript properties to show you the viewport size (innerWidth/innerHeight), the full browser window size (outerWidth/outerHeight), your screen’s physical resolution, and critical details like pixel ratio and orientation. As you resize your browser, all values update instantly, making it an indispensable tool for responsive web design and development.
For web developers and designers, understanding the exact dimensions of the viewport is crucial. Responsive design relies on knowing how a layout behaves at different breakpoints. Opening browser DevTools every time you need to check the current size is tedious and disrupts workflow. This tool solves that by providing a persistent, always-visible dashboard of your current dimensions. It helps you quickly verify media queries, debug layout shifts, and ensure your designs look perfect at every size.
Using the window size detector is completely intuitive:
Open the Tool: Simply load this page in your browser.
Resize Your Window: Drag the edges of your browser window to make it larger or smaller.
Watch It Update: The main display at the top shows your current viewport size (width x height) and updates instantly as you resize.
Explore the Tabs:
Viewport (Window): Shows innerWidth/Height (the actual content area) and outerWidth/Height (including browser toolbars).
Screen (Display): Shows your monitor’s physical resolution and available space.
Use the Controls:
Refresh: Manually update the dimensions (usually automatic, but useful for edge cases).
Copy: Copies a summary of your dimensions to the clipboard.
Log: Prints a detailed report to the browser console (F12).
Fullscreen: Toggles fullscreen mode to see how your dimensions change.
The tool works by tapping directly into your browser’s built-in information about itself and your device.
window.innerWidth / window.innerHeight: These properties tell us the size of the content area of your browser window—the space where the website actually lives. This is your viewport.
screen.width / screen.height: These properties come from your operating system and tell us the physical resolution of your monitor.
window.devicePixelRatio: This tells us how many physical pixels are used to display one CSS pixel (important for high-DPI “Retina” displays).
Event Listener: The tool listens for the resize event. Every time you change the window size, it automatically re-reads all these properties and updates the display.
Imagine you are a developer building a responsive navigation menu that should switch from a horizontal bar to a hamburger menu at 768 pixels wide.
You open the Window Size Detector in a separate tab or on a second monitor.
You slowly drag your browser window narrower while watching the tool’s main display.
The numbers count down: 1200 x 800 … 1000 x 800 … 800 x 800 …
As you cross the 768px threshold, you can immediately check if your CSS media query has triggered correctly and the hamburger menu appears. The tool provides the exact measurement needed to verify your code.
Real-Time Updates: No refresh button needed; dimensions update as you resize.
Comprehensive Data: Displays viewport, screen, and device information all in one place.
Developer-Friendly: Copy to clipboard and console logging features streamline bug reporting and documentation.
Zero Installation: Works in any modern browser; no downloads or extensions required.
Completely Free: Unlimited use with no sign-ups or hidden costs.
Privacy-Focused: All data stays in your browser; we don’t track or store your screen size.
Educational: Helps new developers understand the difference between viewport, screen, and available dimensions.
Web Developers: For on-the-fly testing during responsive layout implementation.
UI/UX Designers: To verify design mockups match real browser dimensions.
QA Testers: To precisely document browser environment when reporting bugs.
Technical Writers: To capture accurate screen specifications for tutorials.
Students: Learning about responsive design and browser APIs.
Curious Users: Anyone wondering about their screen’s specifications.
Confusing Inner and Outer: Remember, innerWidth/Height is your actual content area. outerWidth/Height includes browser tabs, address bar, and scrollbars.
Forgetting Pixel Ratio: On high-DPI screens, the reported viewport size may be smaller than the physical pixel count. Check the pixel ratio to understand scaling.
Testing in Iframes: If this tool is embedded in another site, it will show the iframe dimensions, not the main window. Use the standalone page.
Ignoring Orientation: On mobile devices, rotating your phone changes the viewport dimensions. Use this tool to test orientation-specific layouts.
This tool reflects the dimensions reported by your browser and operating system. Different browsers may have slight variations in how they calculate outerWidth/Height due to UI differences. The fullscreen toggle requires a secure (HTTPS) connection and user interaction to function. The tool cannot detect the exact model of your device, only the screen properties it reports.
This is one of the most common points of confusion for new web developers.
Screen Resolution is a hardware specification. It’s the total number of physical pixels your monitor has (e.g., 1920 x 1080). This does not change.
Viewport Size is a browser/window specification. It’s the dimensions of the area where your webpage is rendered. This changes constantly as you resize your browser window or rotate your mobile device.
Why It Matters: When writing responsive CSS with media queries, you are targeting the viewport, not the screen resolution. A user could have a 4K screen but have their browser window snapped to half the display.
Modern devices, especially phones and high-end laptops, have a phenomenon called a “high-DPI” or “Retina” display. This is where the devicePixelRatio comes in.
CSS Pixel: The abstract unit you use in your code (width: 100px;).
Physical Pixel: An actual tiny light-emitting dot on the screen.
Pixel Ratio: On a standard screen, 1 CSS pixel = 1 physical pixel. On a 2x Retina screen, 1 CSS pixel is rendered using a 2×2 grid of physical pixels (4 total). This makes text and images look incredibly sharp. Our tool shows you the pixel ratio so you know how your designs are being scaled.
Media queries are the foundation of responsive web design. They allow your CSS to apply styles conditionally based on the characteristics of the viewport. The most common use is checking the width.
/* Applies when the viewport is 768px or wider */ @media (min-width: 768px) { .container { width: 750px; } }
Using a tool like this Window Size Detector, you can physically resize your browser and see exactly when those media queries “kick in,” making it easier to debug your responsive breakpoints.
While you should design for your content, not specific devices, knowing common breakpoints helps you plan. This tool includes a handy reference grid of popular device resolutions.
Mobile: 320px – 480px
Tablet: 768px – 1024px
Laptop: 1280px – 1440px
Desktop: 1920px and above
Always test your designs across a range of sizes, not just these specific numbers.
innerWidth is the width of your browser’s content area—the space where the webpage is displayed. outerWidth is the total width of the browser window including toolbars, tabs, and scrollbars. The outer dimensions represent the full application window.
Yes, it works on all devices with a modern browser. On mobile, the viewport dimensions change when you rotate the device, and the tool will detect orientation changes automatically.
The device pixel ratio tells you how many physical screen pixels make up one CSS pixel. On standard displays, it’s usually 1. On high-resolution “Retina” displays, it might be 2 or 3, meaning the screen packs more physical pixels into the same CSS space for sharper images.
Yes! Once the page is loaded, it works entirely in your browser without needing an internet connection. You can bookmark it and use it anytime.
Click on the Screen (Display) tab. There you will see screen.width and screen.height, which represent the physical resolution of your monitor.
Your screen resolution is the physical number of pixels on your monitor. Your viewport size is how many of those pixels are currently being used to display the browser’s content area. If your browser isn’t in fullscreen, the viewport will be smaller.
Absolutely not. This tool runs entirely in your browser. We do not collect, store, or transmit any information about your screen size or device. Your privacy is fully protected.
ADVERTISEMENT
ADVERTISEMENT
