This screen info tool reports the key numbers about your display and browser window in one place: the screen resolution, the current browser viewport size, the device pixel ratio, the colour depth and an estimated refresh rate. Everything is read from the browser and updates as you resize the window, so it is a quick reference whether you are debugging a responsive layout, checking a high-density display, or confirming a monitor is running at the settings you expect.
Screen resolution and viewport size are often confused, and this tool shows both so the difference is clear. The screen resolution is the full size of your display in logical pixels, while the viewport is the area your browser content actually occupies, which is smaller once you account for toolbars and window borders. The device pixel ratio ties them to physical pixels: a value of 1 means one logical pixel equals one physical pixel, while a value of 2 or more indicates a high-density retina-style display where each logical pixel is drawn with several physical ones. Knowing the pixel ratio is essential when you are preparing images or debugging why a layout looks different on a laptop and an external monitor.
The refresh rate estimate is measured by counting animation frames over a short interval using requestAnimationFrame, which gives you a close read of how many times per second your display updates. A common office monitor reports around 60, while gaming and high-end laptop panels report 120, 144 or more. It is an estimate rather than a hardware readout, since the browser does not expose the exact panel specification, but it is a reliable way to confirm that a high-refresh display is actually running at its advertised rate rather than falling back to 60.
Colour depth tells you how many bits per pixel the display is using, which relates to how many distinct colours it can show. All of these values are read locally in your browser and nothing is sent anywhere, so this is a fast, private way to gather the display details you need for bug reports, compatibility checks, or simply satisfying your curiosity about the hardware in front of you.
How to use the screen info
- Open the page and the current values are read automatically.
- Compare the screen resolution against the viewport size of your browser window.
- Check the device pixel ratio to see whether you are on a high-density display.
- Watch the estimated refresh rate settle after a moment of measurement.
- Resize the browser window and see the viewport figures update live.
Frequently asked questions
What is the difference between screen resolution and viewport size?
Screen resolution is the full size of your display in logical pixels, while the viewport is the smaller area your browser content occupies after toolbars and borders. This tool shows both so you can see how much of the screen your browser window is actually using.
What does device pixel ratio mean?
Device pixel ratio is how many physical pixels make up one logical pixel. A ratio of 1 is a standard display, while 2 or higher indicates a high-density retina-style screen. It matters when preparing images and when a layout looks sharper or larger on one screen than another.
How accurate is the refresh rate reading?
The refresh rate is estimated by counting animation frames over a short period, so it is a close approximation rather than an exact hardware value. It reliably distinguishes a 60 Hz display from a 120 Hz or 144 Hz one, which is usually what you need to confirm.
More hardware tests
Keep checking your gear with the rest of the MyGearCheck suite: