Screen Resolution Detector

What Is the Screen Resolution Detector?

The Screen Resolution Detector is a free, browser-based tool that reports your display and browser window size. Its workspace lists Screen Width, Screen Height, Viewport Width, Viewport Height, Pixel Ratio, and Color Depth. Screen size is the full display; viewport size is the area actually available to the web page inside the browser window.

Everything runs in your browser. You do not need to install software, create an account, or upload anything.

How to Use the Screen Resolution Detector

1. Open this page. The workspace should list the six values automatically, with no input needed.
2. Read Screen Width and Screen Height for the full display size in CSS pixels.
3. Read Viewport Width and Viewport Height for the size of the page area. These change when you resize the window or show or hide browser panels.
4. Read Pixel Ratio for display scaling and Color Depth for how many bits are used per pixel of color.
5. Reload the page if you change displays, zoom, or window size and want fresh values.

Worked Example

In an observed test on this page, the workspace did not populate: it showed “–” for Screen Width, Screen Height, Viewport Width, Viewport Height, Pixel Ratio, and Color Depth. That is the actual observed output, and it is why the Limitations section below says the tool cannot currently be relied on for measurements in this browser.

When the tool works as intended, you would expect a result such as Screen Width 1920, Screen Height 1080, Viewport Width 1280, Viewport Height 720, Pixel Ratio 1, and Color Depth 24 — meaning a 1920 by 1080 display, a 1280 by 720 page area, no extra pixel scaling, and 24-bit color. Do not treat those illustrative numbers as a measurement from this page, because the observed output was dashes for every field.

Limitations

• Observed bug: In testing, all six workspace values stayed “–” and never populated on page load. Until this is fixed, do not rely on this tool for screen or viewport measurements.
• Screen size is reported in CSS pixels, not physical device pixels. On a high-density display, multiply by the pixel ratio to estimate physical pixels.
• Viewport size depends on the browser window, zoom level, bookmarks bar, DevTools, and other panels. The same screen can show many different viewport sizes.
• Color Depth does not describe color accuracy or HDR support; it only reports bits per pixel as exposed by the browser.
• The tool reports this device and browser only. It cannot detect the resolution of a second monitor, a projector, or another visitor’s screen.

Frequently Asked Questions

What is the difference between screen size and viewport size?

Screen size is the full display. Viewport size is the part of the browser window that shows the web page, after toolbars, tabs, and window borders are taken out.

Why is my viewport smaller than my screen?

Because the browser window does not fill the whole screen, or because toolbars, tabs, and side panels take up space. Maximizing the window usually increases the viewport.

Why does the workspace show “–” for every value?

Dashes mean no value has been reported yet. In the observed test the values never populated, which is a bug rather than normal behavior. Try reloading or another browser, but do not use the tool for measurements until the values appear.

Does this tool work on phones?

It is meant to. On a phone, screen size reflects the device display and viewport size reflects the browser area, but mobile browsers may change the viewport when the address bar shows or hides, so recheck after scrolling.

Summary

The Screen Resolution Detector is meant to be a quick, private way to check display, viewport, pixel ratio, and color depth. It is simple and free, but in the observed test its workspace did not populate, so verify that the values appear before using it for design, support, or troubleshooting decisions.