loot.tools

Screen Resolution

See your screen resolution, browser viewport size, device pixel ratio, color depth, orientation, and aspect ratio at a glance. Resize the window or rotate your device and the numbers update live. Everything is read from your own browser - nothing is sent anywhere.

Reading your display...

-
Viewport (CSS px)
-
Screen resolution
-
Device pixel ratio
-
Physical resolution
Available screen
-
Screen aspect ratio
-
Color depth
-
Orientation
-
Touch points
-

Viewport is the CSS-pixel area your page actually paints into, which is what media queries respond to. Screen resolution is the full display reported by the OS. Multiply it by the device pixel ratio to get the physical pixels behind it - a Retina or high-DPI screen packs several device pixels into each CSS pixel.

What this tool shows

Your screen resolution is the full pixel size of your display as the operating system reports it. The viewport is the smaller area your browser actually paints a page into, after toolbars and window chrome. This tool lists both, plus the device pixel ratio, the available screen area, color depth, orientation, and the reduced aspect ratio. Resize the window and the viewport numbers track it in real time.

Resolution vs. viewport vs. physical pixels

A page's CSS sees the viewport in logical pixels, which is what media queries respond to. The reported screen resolution is also in logical pixels. Multiply that by the device pixel ratio and you get the physical pixels the panel actually drives - a high-DPI or Retina display packs two or more device pixels into every CSS pixel, so a screen that reports 1920 by 1080 can be pushing 3840 by 2160 real pixels.

When you'd use this

  • Checking a monitor or laptop's real resolution before buying or selling
  • Debugging responsive layouts by watching the viewport change as you resize
  • Confirming a high-DPI display reports the pixel ratio you expect
  • Grabbing your exact screen specs to paste into a bug report