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 detect my screen size in inches automatically?

A browser reports pixels, not the physical dimensions of the display. Pixel counts alone cannot determine a diagonal or true DPI. Enter physical width and height in Measure a screen by hand, or use the published specification for your model.

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.

How do you measure a screen size?

Screens are sold by the diagonal of the lit picture: measure from one corner of the picture to the opposite corner, in inches, and leave out the frame. That is the same for a TV, a computer monitor, a laptop, a tablet and a phone. On a big TV a tape rarely spans the diagonal cleanly, so measure the width along the bottom and the height up one side and type both into Measure a screen by hand: it squares them, adds them and takes the root, so a picture 47.9 by 27 inches reads 55.0 inches. A TV can measure a little under the size on the box, because sets are sold by size class and a 55-inch class picture can be 54.6 inches across.

How do I make my screen bigger or smaller?

Change the scale rather than the screen. On Windows 10 and 11 open Settings, then System, then Display, and change Scale; if everything looks stretched or blurred, set Display resolution to the one marked Recommended. On a Mac open System Settings, then Displays, and choose between Larger Text and More Space. On an iPhone, and on iPads that offer it, it is Settings, then Display & Brightness, then Display Zoom. In a browser, Ctrl and minus or Ctrl and plus zooms the page, Cmd on a Mac. The scale settings change what this page reads, so press Measure again afterwards to see the new figures.

Does it work on an iPhone, Android phone, iPad, Mac, Windows PC or Chromebook?

Yes. It runs in any current browser on any of them, with nothing to install, and reads the screen of whatever device opened it. On a phone the Screen row is the size pages are laid out in and the Physical row is the panel's own pixel count. Pages for iPhone, iPad and Android phones list each model's published diagonal and resolution, and the iPhone and iPad tables mark the models that match the screen being read.