What Is My Screen Size?

Common questions

What is the difference between screen size and viewport size?

The screen is the whole display. The viewport is the slice of it this page was actually handed, and they are separate rows here for that reason. On most machines they differ by a few hundred pixels, because the window frame, the tab strip, the address bar, any bookmarks bar and any scrollbar all come out of the screen before the page gets anything. Resize the window and the viewport row changes while the screen row does not. If you are writing a CSS media query, the viewport is the number you want.

Why can this not tell me my screen size in inches?

Because no browser reports it. A browser hands a page a pixel count and never the physical dimensions of the glass, so a 27-inch monitor and a 15-inch laptop both running 2560 × 1440 are indistinguishable from here. Any page that prints you a diagonal in inches has assumed a DPI figure and multiplied by it, which is a guess wearing the clothes of a measurement. The real diagonal is on the box, in the manual, or findable from the model number.

What does device pixel ratio mean?

It is how many physical dots the screen uses for one CSS pixel. At 1× they are the same thing. At 2× the panel draws a 2 by 2 block of dots for every pixel the page lays out, which is what makes text on a Retina or high-DPI screen look smooth. Both numbers are on this page: the CSS resolution the browser reports, and that multiplied by the ratio, which is the panel's own grid. Browser zoom changes the ratio too, so a desktop reading 1.1× or 1.25× is usually a zoom level rather than a fancy monitor.

Why does my phone report a much smaller screen than my laptop?

Because a phone reports CSS pixels, not dots. An iPhone reporting 390 × 844 has a 1170 × 2532 panel behind it: the device pixel ratio is 3, and the small number is what pages are laid out in so that text lands at a readable physical size rather than microscopic. The Physical row is the one to compare against a laptop, and by that measure a modern phone has more dots than a 1080p laptop.

Why does my 1920 × 1080 monitor report 1536 × 864?

Windows display scaling. At 125% the browser reports the screen divided by 1.25, so 1920 × 1080 becomes 1536 × 864 in CSS pixels and the device pixel ratio reads 1.25×. The Physical row multiplies the two back together and returns 1920 × 1080. The reference table names 1536 × 864 for exactly this reason: it is one of the most common readings on the web and no panel is built at it.

Why is my aspect ratio called 16:9 when the numbers do not divide evenly?

Because the label is the family and the reduction is the arithmetic, and both are shown. 1366 × 768 is the most common laptop panel in the world and it is not 16:9: it reduces exactly to 683:384, which is 0.05% wider. Ultrawides are further out, 2560 × 1080 is sold as 21:9 and is really 64:27. Whenever the family name and the exact reduction differ, a line under the readings gives the reduction, and the gap between the two where there is one: 18:9 and 2:1 are the same ratio written differently, and that is said rather than dressed up as a difference.

Do the numbers update if I move or resize the window?

Yes. Everything is re-read when the window changes size and when a device is turned, so you can drag a window edge and watch the viewport follow while the screen stays put. There is also a Measure again button, which is the one to press after dragging the window to a second monitor: a screen swap does not always fire a resize event, and the device pixel ratio can be different over there.