Display & viewport 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 browser-based utility that reads and displays detailed information about your screen and browser window. It shows your physical screen resolution (screen.width x screen.height), the available screen space (excluding the taskbar), your current viewport size, and critical display metrics like pixel ratio, color depth, and orientation. All values update in real-time as you resize your browser or scroll the page.
Knowing your screen resolution is essential for many tasks—from checking if your monitor meets a game’s requirements to debugging responsive website layouts. While you can find this information in your system settings, it often requires navigating through multiple menus. This tool provides an instant, comprehensive dashboard of all relevant display metrics in one place. For web developers, it’s particularly valuable for understanding the relationship between screen resolution and viewport size during responsive design testing.
Using the screen resolution detector is simple and intuitive:
Open the Tool: Simply load this page in your browser.
View Your Screen Resolution: The main display at the top shows your physical screen resolution (e.g., “1920 x 1080”).
Explore the Tabs:
Screen Tab: Shows physical screen dimensions, available space (minus taskbar/dock), color depth, and pixel depth.
Window Tab: Shows viewport size (innerWidth/Height), full browser window size (outerWidth/Height), document size, and scroll position.
Resize Your Window: As you resize your browser, watch the viewport dimensions update in real-time.
Use the Controls:
Refresh: Manually update all dimensions.
Copy: Copies a summary of your display information 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 your device and window.
screen.width / screen.height: These properties come from your operating system and tell us the physical resolution of your monitor.
screen.availWidth / screen.availHeight: These show the screen size minus any space taken by your OS taskbar or dock.
window.innerWidth / window.innerHeight: These tell us the size of the content area of your browser window—the actual space where the webpage is displayed.
window.devicePixelRatio: This tells us how many physical pixels are used to display one CSS pixel (important for high-DPI “Retina” displays).
Event Listeners: The tool listens for the resize and scroll events. Every time you change the window size or scroll, it automatically re-reads all these properties and updates the display.
Imagine you’re a web developer building a responsive website. You’ve written a media query that should change the layout at a viewport width of 768 pixels.
You open the Screen Resolution Detector and click on the Window tab.
You see your current innerWidth is 1200 pixels.
You slowly drag your browser window narrower while watching the innerWidth value decrease.
When the number hits 768, you immediately check if your CSS media query has triggered correctly. The tool gives you real-time feedback on exactly what the browser is seeing.
Later, a user reports a bug on a 4K monitor. You can ask them to open this tool and tell you their screen resolution, viewport size, and pixel ratio, giving you all the data needed to diagnose the issue.
Real-Time Updates: No refresh button needed; dimensions update as you resize and scroll.
Comprehensive Data: Displays physical screen, available space, viewport, and window information all in one place.
Developer-Friendly: Copy to clipboard and console logging features streamline debugging and bug reporting.
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 information.
Educational: Helps users understand the difference between screen resolution, viewport, and available space.
Web Developers: For real-time viewport testing and responsive design debugging.
UI/UX Designers: To understand how designs will appear on different screen sizes.
Gamers: To verify if their monitor meets game resolution requirements.
IT Support Staff: To quickly gather display information for troubleshooting.
Content Creators: To check display specs for video editing or graphic design.
Curious Users: Anyone wondering about their screen’s specifications.
Confusing Screen and Viewport: Remember, screen resolution is your monitor’s physical size. Viewport (innerWidth/Height) is the browser’s content area, which can be smaller.
Ignoring Pixel Ratio: On high-DPI screens, the viewport may report smaller numbers than the physical pixel count. Check the pixel ratio to understand scaling.
Testing on the Wrong Monitor: If you have multiple monitors, ensure your browser window is on the display you want to test.
Forgetting Browser Chrome: outerWidth/Height includes browser tabs, address bar, and scrollbars, so it will always be larger than innerWidth/Height.
This tool reflects the dimensions reported by your browser and operating system. On systems with multiple monitors, it reports the resolution of the display where the browser window is primarily located. The color depth and pixel depth values are accurate for your current display configuration. The tool cannot detect the exact model of your monitor, only the resolution it reports.
This is one of the most common points of confusion in web development and display technology.
Screen Resolution is a hardware specification. It’s the total number of physical pixels your monitor has (e.g., 1920 x 1080). This number is fixed and does not change.
Viewport Size is a browser/window specification. It’s the dimensions of the area where a webpage is rendered (e.g., 1280 x 950). This changes constantly as you resize your browser window.
Why It Matters for Web Design: When you write CSS media queries like @media (max-width: 768px), you are targeting the viewport, not the screen resolution. A user could have a 4K screen but a very narrow browser window.
The devicePixelRatio reported in this tool is key to understanding modern high-resolution displays.
Standard Displays: 1 CSS pixel = 1 physical pixel.
Retina/High-DPI Displays: 1 CSS pixel may be represented by a 2×2 or 3×3 grid of physical pixels. This makes text and images appear incredibly sharp because they are rendered with more detail.
Practical Impact: When designing for high-DPI screens, you need to provide higher resolution images (e.g., using srcset in HTML) so they don’t appear blurry. This tool helps you know if your users are on such devices.
While resolutions vary widely, certain standards dominate the market. This tool includes a handy reference grid:
HD (1366×768): Common on budget laptops.
Full HD (1920×1080): The most common desktop and laptop resolution.
2K/1440p (2560×1440): Popular among gamers and professionals.
4K/UHD (3840×2160): Increasingly common on high-end monitors and TVs.
Mobile: iPhone resolutions (375×667, 390×844) and iPad (768×1024) are key for mobile design testing.
Aspect ratio is the proportional relationship between width and height (e.g., 16:9, 4:3, 21:9).
16:9 is the most common widescreen standard for monitors and TVs.
16:10 is popular on some laptops, offering slightly more vertical space.
21:9 (Ultrawide) is used for gaming and productivity.
4:3 is an older standard, rarely used today.
You can calculate your aspect ratio by dividing width by height (e.g., 1920/1080 = 1.78, which is 16:9). This tool shows the calculated ratio for each common resolution.
Screen resolution (screen.width/height) is the physical number of pixels on your monitor. It’s a fixed hardware specification. Viewport size (innerWidth/innerHeight) is the dimensions of the browser’s content area, which changes as you resize your window. The viewport is always equal to or smaller than the screen resolution.
screen.availWidth and screen.availHeight show the screen resolution minus any space taken up by your operating system’s taskbar, dock, or menu bar. It tells you the maximum space available for application windows.
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. For example, a 4K screen at 200% scaling would have a pixel ratio of 2.
Yes, it works on all devices with a modern browser. On mobile, the screen resolution remains constant, but the viewport changes when you rotate the device. The tool will detect orientation changes and update accordingly.
On Windows, right-click the desktop and select “Display settings” to see your resolution. On Mac, go to “System Settings” > “Displays.” However, this tool provides the information instantly without navigating through menus.
If your browser isn’t in fullscreen mode, the viewport (innerWidth/Height) will be smaller than your screen resolution. This is normal and expected. The tool helps you see this difference.
Color depth (colorDepth/pixelDepth) indicates the number of bits used to represent the color of a single pixel. Higher color depth means more accurate color representation. Most modern systems use 24-bit or 32-bit color depth.
Absolutely not. This tool runs entirely in your browser. We do not collect, store, or transmit any information about your screen resolution or device. Your privacy is fully protected.
ADVERTISEMENT
ADVERTISEMENT
