Whether you're a web designer testing a new layout, a developer debugging a responsive issue, or just curious about your display's specifications, knowing your screen size is essential. Our free online tool instantly detects and displays your exact screen resolution and current browser window size, with no downloads or extensions required.

How to Use This Tool

Using this tool couldn't be simpler! The moment you load this page, it automatically detects your screen information and displays it in the boxes above.

• To see the viewport size change, simply resize your browser window.
• The Screen Resolution and Pixel Density values are fixed based on your monitor and will not change.

Understanding the Results

This tool provides three key pieces of information:

1. Screen Resolution: The total number of pixels on your physical screen. This is a fixed value based on your monitor's hardware.
2. Browser Viewport: The size of the visible area of the webpage inside your browser window. This changes when you resize the window and is the value used by CSS media queries for responsive design.
3. Pixel Density Ratio: This tells you how many physical screen pixels are used to draw a single "CSS pixel". A value of 2.0x means your screen is a high-resolution "Retina" display.

Screen Resolution vs. Browser Viewport: What's the Difference?

It's a common point of confusion, but the difference between screen resolution and browser viewport is critical for web design and development.

Screen Resolution is the total number of distinct pixels in each dimension that can be displayed by your physical monitor. A common resolution is `1920 x 1080`. This value is determined by your hardware and your operating system's display settings. It doesn't change unless you change your monitor or settings.

The Browser Viewport, on the other hand, is the actual space available for content inside your browser window. It does not include the browser's own user interface, like the address bar, bookmarks bar, or scrollbars. This is the area that your website's CSS responds to. When you resize your browser window, the viewport size changes, and if the website is responsive, its layout will adapt.

Why Pixel Density Matters

The Device Pixel Ratio (DPR) is a multiplier that defines the relationship between physical pixels on the screen and logical "CSS" pixels. A standard display has a DPR of 1.0x. A high-resolution display, often called a "Retina" display, might have a DPR of 2.0x or even 3.0x. This means for every one CSS pixel, the screen uses a 2x2 or 3x3 grid of physical pixels to draw it, resulting in much sharper text and images. Developers use this value to serve higher-quality images to users with high-resolution screens.

Frequently Asked Questions (FAQ)

Q1: Why is my viewport size smaller than my screen resolution?

Your viewport will almost always be smaller than your screen resolution. This is because your screen resolution measures the entire screen, while the viewport only measures the usable area inside the browser, excluding the browser's own toolbars, tabs, and the operating system's taskbar.

Q2: Can a website see my screen resolution?

Yes. As you can see from this tool, any website can use simple JavaScript (`window.screen.width` and `window.screen.height`) to detect the resolution of your monitor. This is generally considered safe and is used for analytics and creating better user experiences.

Q3: How does this help with responsive design?

Web designers and developers use this information constantly. By resizing their browser window, they can use this tool to see the exact viewport width at which their design "breaks" or looks awkward. They can then use that width to write a CSS media query, which applies new styles to fix the layout for that specific screen size and smaller.