Skip to main content
CalcChef

Screen Resolution

See your screen resolution in CSS pixels, device pixel ratio, estimated physical pixels, viewport size and color depth, as your browser reports them. How it works

Use the Screen Resolution

—
Screen Resolution
CSS pixels (screen.width x screen.height)
—
Estimated Physical Pixels
Estimate: CSS pixels x pixel ratio. Browser zoom and display scaling change it.
—
Viewport Size
Browser window content area, in CSS pixels
—
Pixel Ratio
Device pixels per CSS pixel. It follows browser zoom.
—
Available Width
(screen minus taskbar)
—
Available Height
(screen minus taskbar)
—
Color Depth
—
Orientation

Display test pattern

Opens a pattern over the whole page to look for banding in the grey gradient and for scaling or moire in the 1-pixel checkerboard and lines. Press Escape or Close to leave.

About the Screen Resolution

A screen reported as 1536 x 864 CSS pixels at a device pixel ratio of 1.25 has about 1920 x 1080 physical pixels. This page shows your screen resolution in CSS pixels as the browser reports it, the pixel ratio, that estimate of physical pixels, the viewport size, the available screen area, the color depth and the orientation, and it opens full-page test patterns for banding and scaling.

CSS pixels, pixel ratio and estimated physical pixels

Screen in CSS pixelsPixel ratioEstimated physical pixelsHigh-density (2x or more)
1920 x 10801x1920 x 1080No
1536 x 8641.25x1920 x 1080No
1280 x 7201.5x1920 x 1080No
1366 x 7681x1366 x 768No
2560 x 14401x2560 x 1440No
1440 x 9002x2880 x 1800Yes
1280 x 8002x2560 x 1600Yes
390 x 8443x1170 x 2532Yes
412 x 9152.63x1082 x 2402Yes

Estimated physical pixels = CSS pixels × ratio, rounded. The last row uses a ratio of 2.625, shown rounded to 2.63x. The ratio follows browser zoom, so read your own figures at 100% zoom.

Frequently asked questions

Why does it say 1536 x 864 when my monitor is 1920 x 1080?
Browsers report the screen in CSS pixels. At a pixel ratio of 1.25, which display scaling or browser zoom can set, 1920 x 1080 physical pixels are 1536 x 864 CSS pixels. Estimated Physical Pixels multiplies back: 1536 × 1.25 = 1920 and 864 × 1.25 = 1080.
What is device pixel ratio?
The number of physical pixels per CSS pixel, read from window.devicePixelRatio. At 2x each CSS pixel is drawn with 2 x 2 physical pixels, and the page calls 2x or more high-density. Zooming the page in raises the ratio; pinch-zoom on a phone does not change it.
What is the difference between screen resolution and viewport size?
Screen resolution is the whole display. The viewport is the part of the browser window that shows the page, without the tabs and toolbars, and it is the width that CSS media queries such as min-width compare against.
Why do the numbers change when I zoom?
Zoom changes the size of a CSS pixel, so the pixel ratio and the viewport size change with it. Set the browser zoom to 100% to read the display's own ratio.
Can this page test for dead pixels?
Only roughly. Show test pattern fills the page with a black-to-white gradient, a 1-pixel checkerboard or 1-pixel lines, so a pixel stuck on black or white can stand out, but there are no solid red, green or blue screens for a stuck colored pixel. The patterns are meant for banding (steps in the gradient) and scaling (blur or moire in the 1-pixel patterns).
What does the Scale figure under the test pattern mean?
It is the device pixel ratio as a percentage: 100% means one device pixel per CSS pixel, so the 1-pixel checkerboard and lines are drawn exactly. At 125% or 150%, common with display scaling, each CSS pixel covers a fraction of device pixels and the patterns blur or show moire; at 200% each cell is a clean 2 x 2 block.

Related Tools

View all tools