We built this simple tool to give you a quick and accurate way to check your display information. Whether you're a web developer testing a responsive design or just curious about your screen's specs, our tool provides all the important details on a single page. It's fast, easy to use, and works on any device with a web browser.
Unlike other basic tools, we show you more than just your monitor's resolution. You can see your live browser viewport size, which changes as you resize your window, making it perfect for testing media queries. We also show your pixel density (DPR), so you know if you're on a "Retina" screen, and your color depth. It's a complete toolkit for anyone working on the web.
What Does Each Value Mean?
- Browser Viewport Size: This is the size of the actual content area inside your browser window. It's the most important number for testing how a responsive website will look. Try resizing your browser to see it change!
- Screen Resolution: This is the total number of physical pixels on your display. It's a fixed value for your monitor and does not change when you resize your browser window.
- Pixel Density (DPR): This is the Device Pixel Ratio. A value of "1x" is a standard display, while "2x" or higher indicates a HiDPI or "Retina" display, where a single CSS pixel is backed by multiple physical pixels.
- Color Depth: This measures how much color information your screen can display. Most modern devices have a 24-bit or 32-bit color depth, which allows for millions of colors.
Frequently Asked Questions (FAQ)
What is the difference between Screen Resolution and Viewport Size?
Screen resolution is the total number of pixels on your physical monitor (e.g., 1920x1080). Viewport size is the space available for content inside your browser window, which is always smaller due to toolbars and scrollbars. Viewport size is what matters for responsive web design.
How do I use this tool for responsive design testing?
Keep this page open and resize your browser window. The "Browser Viewport Size" will update in real-time. You can use this to see exactly when your website's CSS media query breakpoints are triggered, helping you test how your design adapts to different screen sizes.
What is a good screen resolution?
There is no single "best" resolution, as it depends on the device. For desktops, Full HD (1920x1080) is the most common. For smartphones, resolutions vary widely. This is why modern web design focuses on adapting to any viewport size, rather than targeting specific resolutions.
Why is my Pixel Density (DPR) higher than 1x?
A DPR higher than 1x (like 2x or 3x) means you have a high-resolution display, often called a "Retina" or HiDPI screen. This means your screen uses more physical pixels to draw each CSS pixel, resulting in sharper text and images. It's important for developers to know this so they can serve higher-quality images to these devices.
Is my information saved?
No. This tool runs entirely in your browser. None of your screen information is sent to our servers or stored in any way. It's completely private and for your eyes only.
