What the numbers on this page mean
A screen resolution is the number of pixels a display shows, written as width by height. A common example is 1920 × 1080, meaning 1920 pixels across and 1080 down. But a single resolution number hides several related values, and this tool shows each of them separately.
Screen resolution is the size of the whole display as the browser reports it. Available size is the part of that screen not taken up by system bars such as a taskbar or dock. Viewport is the size of the browser's content area, the space your web page actually has. It changes when you resize the window.
Pixel ratio is the relationship between CSS pixels, which websites use for layout, and the physical pixels in the display. A ratio of 2x means each CSS pixel is drawn using a 2 by 2 block of device pixels, which is how sharp, high-density screens keep text from looking tiny. Color depth is the number of bits the screen reports for color, shown as for example 24-bit.
When you need this information
Web designers and developers check these values when testing how a layout behaves at a specific size. If a page looks cramped or stretched for one visitor, knowing their viewport width and pixel ratio helps explain why.
It is also useful for everyday tasks such as picking a wallpaper size, and support teams sometimes ask for these details when diagnosing a display problem.
Keep in mind the numbers describe what the browser reports, which may not match the physical panel. Operating system scaling can change what the browser sees. A high-resolution laptop with scaling set to 150 percent, for example, often reports a smaller logical size than the panel's native pixel count.
How to check your screen details
- Open the tool. There is nothing to click or upload, because the values appear as soon as the page loads.
- Read the tiles: Screen resolution, Available size, Pixel ratio, Color depth, and Viewport.
- To test a different window size, resize your browser window and check the values again.
- Note the figures you need and use them in your report, design, or support request.
Everything is read from your own browser. The page does not send these values anywhere and has no outside service involved.
Things to watch for
The tiles update when the window is resized, which keeps the screen figures current in most cases. The viewport value is read at the moment the page redraws, so if it looks stale after a change such as zooming, resize the window slightly or reload the page to refresh the reading.
Browser zoom also affects results. Zooming in typically lowers the reported viewport width and can change the pixel ratio, so reset zoom to the default if you want the true device numbers. On a phone, rotating the device swaps width and height.
If you use multiple monitors, the values describe the screen the browser window is on. If you need to make an image fit the numbers you find here, the Image Resizer is a handy follow-up.