Screen Resolution Checker

There is nothing to fill in. Your browser already knows these values and the page reads them as it loads, then again whenever you resize the window.

1. Read the large figure under Your screen resolution. It is the width and height of your display in CSS pixels. The line under it gives the same screen in physical pixels and the pixel ratio.
2. Check Device pixel ratio, Available screen (minus taskbar) and Outer window in the list below.
3. Look at Browser viewport, the area the web page itself gets. Drag the window edge or rotate your phone and it updates by itself.
4. Note Colour depth, Orientation, Touch points and Aspect ratio if a developer or support agent asks.
5. Press Copy details to copy the list as text, or Refresh to read the values again, for example after moving the window to another monitor.

The values are read by your browser and shown to you; the tool does not send them anywhere.

A modern screen has two kinds of pixel. Physical pixels are the dots in the panel, the figure on the box, such as 3840 by 2160. CSS pixels are the units web pages are laid out in, and the browser scales them so text stays readable on dense panels. The device pixel ratio (DPR) links the two: physical size = CSS size x DPR. This page shows the CSS size in large type and calculates the physical size by multiplying.

That is why the checker can show a lower number than your monitor specification. Divide the panel size by the ratio to get the CSS size, or multiply the other way round. Browser zoom also changes the ratio and the viewport, so press Ctrl+0 to reset zoom before reading the physical figure. The Aspect ratio row simplifies the width and height exactly, which is neat for 1920 x 1080 (16:9) but turns 1366 x 768 into 683:384 even though it is close to 16:9.

The viewport size is what responsive websites react to, so designers use it to choose layout breakpoints, and support teams use the resolution and ratio to reproduce blurry icons or cut-off menus. The Available screen row subtracts the taskbar or dock, and Outer window includes browser toolbars, so neither equals the viewport. Orientation reports portrait or landscape, with the primary or secondary direction on devices that expose it.

Resolution alone does not say how sharp a screen looks. That depends on pixel density, in pixels per inch (PPI): the diagonal in pixels divided by the diagonal in inches. A 24 inch 1920 x 1080 monitor is sqrt(1920^2 + 1080^2) / 24 = about 91.8 PPI, whereas a 27 inch 4K monitor is sqrt(3840^2 + 2160^2) / 27 = about 163 PPI. You can paste either expression into the scientific calculator to try your own screen.

• Match wallpaper or banner images to the CSS size multiplied by the ratio. The image resizer and image cropper handle the rest.
• Pair the resolution with browser details from the what is my browser page when you file a bug.
• On a multi-monitor setup, the values describe the screen your window is on at that moment.

For image sizes, multiply the viewport width by the ratio. A banner meant to fill a 1920 px wide viewport on a screen with a ratio of 2 needs about 3840 px of width to look sharp, whereas the same banner on a ratio of 1 needs only 1920. Serving one file to everyone means choosing a compromise, which is why developers often provide several sizes of the same image.

Some privacy settings report rounded or generic values, and in-app browsers inside social apps can differ from the phone's own browser.