Screen resolution

How to use the screen resolution tool

1. Open this page on the screen you want to check. The numbers appear as soon as it loads, and there is no button to press.
2. Read the Screen resolution cell for the size in device pixels, and the Viewport cell for the page area.
3. Resize the window, rotate your phone or zoom the page. The values and the drawing follow every change.
4. For pixel density, type the screen diagonal in inches into the Screen diagonal field, such as 15.6 or 27. You find it in the specs or on the box.
5. Click Copy results to copy every value, for a support request or a forum post.

The drawing shows the screen to scale, with the viewport inside it. The system bars, such as the taskbar, dock or menu bar, are hatched. While you pinch-zoom on a phone or touchpad, the part of the page on screen is marked as well. The tool pauses when the tab is hidden, and the last reading stays on screen.

What the results mean

The first cell is the screen’s size in device pixels, which is the figure in your system’s display settings.

Screen in CSS pixels is the screen as websites see it at 100% zoom: the screen resolution divided by the display scaling. A 1920 × 1080 laptop at 125% scaling reads 1536 × 864. On a Mac this is the “looks like” size from the display settings. Chrome and Edge keep this figure when you zoom the page, while Firefox and Safari change it.

Viewport is the part of the window that shows the page, and responsive layouts switch at its width. The Visual viewport shrinks when you pinch-zoom. Available screen area is the screen minus the taskbar, dock or menu bar.

Aspect ratio names the shape of the screen, such as 16:9, Orientation says landscape or portrait with the rotation angle where the browser reports it, and Pixel density shows a value once you type the diagonal.

HDR, Color gamut and Color depth describe what the browser can show on this screen. Wide P3 colors and HDR video need support from both the screen and the browser. Pointer and Hover tell whether you use a mouse, a touchpad or a finger.

Numbers look wrong?

This tool needs no permission and has no error messages of its own.

Resolution lower than the box says

The display may run in a lower mode than the panel supports. Open your display settings and pick the recommended resolution. A cable or adapter that cannot carry the full resolution can also force a lower one.

Resolution higher than the panel on a Mac

On a Mac in a scaled mode, the Screen resolution cell reads “rendered; native may differ”, 1:1 pixel mapping reads Unknown, and the pixel density assumes macOS draws at the panel’s native size. The question about Macs below explains the scaled mode. For the native resolution, check your Mac’s technical specifications.

Screen in CSS pixels is smaller than the resolution

That is display scaling at work. A Full HD laptop at 125% scaling gives websites 1536 × 864 CSS pixels, and the Device pixel ratio reads 1.25. To change the scaling, open your display settings.

Browser zoom says Unknown

Only Chrome, Edge and other Chromium browsers let a page estimate zoom, and only when exactly one zoom step fits the window. A side panel, docked DevTools or a split view throws the estimate off. Close them, press Ctrl + 0 (Cmd + 0 on a Mac) and look again.

HDR says No on an HDR monitor

The browser reports HDR only when HDR is turned on in the operating system. Turn on HDR in your display settings (Windows: Settings > System > Display > Use HDR) and reload the page. If the cell says Unknown, your browser does not answer the HDR question.

Color depth says 24 bit on a 10-bit screen

Many browsers report 24 bit, which is 8 bits per channel, whatever the panel can do. Treat the number as what the browser reports, not as the panel’s limit.

The numbers belong to another monitor

The page reads the screen that holds the window and updates when the browser reports a change. If you moved the window to another monitor and the values did not follow, resize the window slightly or reload the page.

How we measure

The tool reads window.screen, the window size, devicePixelRatio, the visual viewport and four CSS media queries (dynamic range, color gamut, pointer and hover), and reads them again on every resize, rotation, zoom or media change the browser reports. The screen resolution is the screen size in CSS pixels times the display scaling; the browser rounds each side to whole CSS pixels, so with fractional scaling the tool picks the standard panel size within one CSS pixel of the product, or the rounded product when none fits. Pixel density divides the diagonal of those pixels by the diagonal you type. A browser cannot read the panel’s model or native mode, so on a Mac the numbers describe what macOS draws.

Frequently asked questions

How do I check my screen resolution?

Open this page on the screen you want to check. The Screen resolution cell shows it at once in device pixels, such as 1920 × 1080, and names it when it is a standard size such as Full HD or 4K UHD. Resize the window, rotate the device or zoom the page, and the values follow.

What is the difference between screen resolution and viewport?

Screen resolution is the size of the whole screen in device pixels. The viewport is the part of the browser window that shows the page, measured in CSS pixels, so it leaves out tabs, the address bar and system bars. Zooming in makes the viewport smaller, while the screen resolution stays the same.

What is device pixel ratio?

It is the number of device pixels that make up one CSS pixel. A ratio of 1 means no scaling, 1.25 matches 125% display scaling, and 2 means every CSS pixel is drawn as 2 × 2 device pixels. Page zoom changes the ratio too, so 125% scaling at 100% zoom reads 1.25, and the same screen at 200% zoom reads 2.5.

How do I calculate the pixel density of my monitor?

Type the screen diagonal in inches into the Screen diagonal field. The tool divides the diagonal of the screen in pixels by that number. For example, a 24 inch 1920 × 1080 monitor is about 92 PPI, a 27 inch 2560 × 1440 monitor about 109 PPI, and a 27 inch 4K monitor about 163 PPI.

Why does my Mac show a higher resolution than my screen has?

Many Macs run in a scaled mode. macOS draws the picture at twice the size you chose in the display settings and shrinks it to the panel, and the browser reports the larger size. Many MacBook Air models work this way, and so does a 4K monitor set to look like 2560 × 1440. A page cannot see the panel’s native pixels, so check your Mac’s technical specifications for its native resolution.

Does the screen resolution change when I zoom the page?

It should not. The tool takes zoom out of the calculation, so the same device pixels show at 50% and at 200%. Chrome and Edge need an estimate of the zoom for that. When the tool cannot make one, it assumes 100% zoom and says so under the number. The viewport and the Device pixel ratio do change with zoom, because CSS pixels get bigger or smaller.