What is my screen resolution?

A display has a fixed number of physical pixels, such as 2560 × 1600 on a 13-inch laptop. Websites do not work in those. They work in CSS pixels, a unit sized so that text stays readable whatever the pixel density, and the browser reports the screen in CSS pixels too. The device pixel ratio says how many physical pixels make one CSS pixel in each direction.

That laptop at a device pixel ratio of 2 reports a screen of 1280 × 800 to websites. An iPhone 15 has 1179 × 2556 physical pixels and reports 393 × 852 at a ratio of 3. This page multiplies the reported size by the ratio to give the physical resolution, and names it where it is a common size.

Windows scales the display to keep text readable, and the browser reports the scaled size. A 1920 × 1080 laptop at the common 125% setting reports a screen of 1536 × 864 with a device pixel ratio of 1.25, and at 150% it reports 1280 × 720. The physical resolution here undoes the scaling, so it matches the display settings.

Browser zoom changes the device pixel ratio as well, in Chrome, Edge and Firefox. Zoom to 200% and the ratio doubles while the reported screen size halves. If the values look off, press Ctrl+0, or Cmd+0 on a Mac, to reset the zoom and measure again.

The screen size is the whole display. The viewport is the part of the browser window a page can draw in, after the toolbars, tabs and any scrollbar, and it is the number that responsive layouts and CSS media queries respond to. On a desktop the two are rarely the same; on a phone the viewport also shrinks when the on-screen keyboard opens.

For responsive testing, record the viewport rather than the screen, and test either side of each breakpoint the design uses. The breakpoint shown here uses the Tailwind CSS defaults, which many sites share; check your own design system for its values.