Tools/Screen Tests

What Is My Screen Size?

Your screen resolution, viewport, browser window, pixel ratio and aspect ratio, read live from this browser. Add the diagonal or calibrate with a credit card to get the physical size in inches and cm.

Your numbers right now

Screen resolution

–

Reading your screen…

–
–
–
–
–
–
–
–

Physical size in inches

Use the size from the box or spec sheet. The width, height and PPI below are worked out from it and the pixel count above.

Pick or type the diagonal to see the width, height and pixel density.

If your OS runs a scaled mode, the physical pixel figure is the rendered resolution, which can differ from the panel's native one. The inches stay right either way.

Share these numbers with support

Paste this into a bug report or support chat. It tells a developer or help desk exactly what your browser sees.

Reading your screen…

Reading your screen size

CSS pixels and physical pixels

Browsers report sizes in CSS pixels, a unit meant to look about the same size on every screen. A high density screen packs several physical pixels into each one, and the device pixel ratio says how many. A 14-inch MacBook Pro on the default setting reports 1512 × 982 at a ratio of 2, which multiplies to the native 3024 × 1964. A different scaling mode makes macOS resample, so the estimate changes even though the panel did not. Windows at 150% scaling turns a 1920 × 1080 panel into 1280 × 720 CSS pixels. Browser zoom changes the ratio too, so set zoom to 100% before you trust the numbers.

Why the browser cannot know your inches

No web API exposes the physical size of a display. The CSS spec fixes one inch at 96 CSS pixels, which is only a convention and is often off by 30% or more. That is why this page asks for the diagonal or a card. A card calibration is accurate to about a millimetre if you match the edges carefully, and it lets you check whether a "15.6 inch" laptop really measures 15.6 inches. Turn the pixel count into density with the PPI calculator.

Finding the real size in your settings

On Windows, open Settings, System, Display: the resolution marked "Recommended" is the native one, and Advanced display shows the model name you can look up. On a Mac, choose About This Mac, More Info, or System Settings, Displays, which lists the size in inches for built-in screens. On an iPhone, Settings, General, About shows the model name, whose spec page lists the diagonal. On Android, check Settings, About phone, then search the model.

Viewport vs. screen for web developers

Media queries such as min-width match the viewport, not the screen. The viewport is the browser window minus tabs, toolbars and any visible scrollbar, so it shrinks when the window is not maximised and changes as mobile address bars slide away. screen.width stays fixed for the display. Design for viewport widths, and test both orientations on phones.

Related tools

Check that your display runs at its native resolution with the screen resolution test, work out pixel density with the PPI calculator, resize to any ratio with the aspect ratio calculator, or see how far away your screen turns sharp with the Retina display calculator.

FAQ

Frequently asked questions

Which number is my screen resolution?

Screen resolution on this page is screen.width by screen.height in CSS pixels. The viewport is separate: it is innerWidth by innerHeight, the page area inside the window. Device pixel ratio is a third figure, window.devicePixelRatio. The physical pixel line multiplies the CSS screen size by that ratio. It is an estimate of the grid the browser is drawing, and it is not always the native count of the panel.

Why is the size in inches blank?

No web API reports the physical size of a display. Inches and centimetres appear only after you type a diagonal or match the card outline to a real card. Until then the page leaves those figures hidden instead of inventing them from 96 CSS pixels per inch.

Is 96 pixels per inch my real pixel density?

No. The CSS spec fixes one inch at 96 CSS pixels so style sheets have a stable unit. That is a convention, and it is often far from the glass on a phone or a Retina display. This page uses 96 only as the starting width of the card outline. Pixel density is worked out from the diagonal you type, or from the card after you move the slider.

What does device pixel ratio mean?

It is how many device pixels line up with one CSS pixel, including operating-system scaling and browser zoom. A ratio of 2 doubles the estimated pixel count in each direction. At 150% scaling on Windows the ratio is usually 1.5, so a 1920 by 1080 panel is reported as 1280 by 720 CSS pixels. Set zoom to 100% (Ctrl or Cmd and 0) before you compare the figures with a spec sheet.

How does the card measurement work?

A bank card, ID or loyalty card uses the ISO ID-1 size, 85.60 by 53.98 millimetres. Hold it flat against the screen and resize the outline until the edges meet. The plus and minus buttons move the outline by one CSS pixel, and Rotate turns it upright on a narrow screen. Nothing in inches is shown until you resize the outline. The match is saved in this browser in device pixels, so a later zoom does not erase it, but you should redo it on another monitor.

Why do the numbers change when I resize or zoom?

The viewport follows the page area, so it changes when you resize, rotate or zoom, and when a mobile address bar slides away. Screen resolution stays with the display. Zoom can still change the pixel ratio, which changes the physical-pixel estimate. Resize and orientation listeners are removed when you leave the page.

What if I enter 0 for the diagonal?

A blank box, 0, a negative number, or a diagonal of 400 inches or more is ignored. The page does not divide by zero, and the width, height and pixel density stay hidden until the value is usable. Card mode does the same until the outline has been moved off the 96 CSS pixels per inch start.