Your screen

What Is My Screen Resolution?

Your screen resolution, browser viewport, device pixel ratio and colour depth, read live in your browser.

Reading your screen and viewport from the browser…

Screen, Viewport and Pixel Ratio

  • Screen resolution: the full pixel size of your display.
  • Viewport: the area of the page the browser actually shows, minus toolbars, and affected by window size and zoom.
  • Device pixel ratio: how many physical pixels map to one CSS pixel, so high-density screens stay sharp.
  • Colour depth: how many bits encode each pixel’s colour, commonly 24-bit.

This is why the viewport is usually smaller than the screen resolution: scaling and a pixel ratio above 1 mean fewer CSS pixels fit than the display has physical pixels.

Why It Matters

Knowing the viewport and pixel ratio lets designers build layouts that adapt to any screen and lets them serve images at the right size, so pages stay sharp without wasting bandwidth.

These values are also part of your browser fingerprint. On their own they identify almost nobody, but combined with your user agent and other traits they help distinguish one device from another.

Frequently Asked Questions

What is screen resolution?
Screen resolution is the number of pixels your display shows, written as width by height (for example 1920 × 1080). More pixels mean a sharper image and more room to fit content.
What is the difference between screen resolution and viewport?
Screen resolution is the size of your whole display. The viewport is just the part of a web page the browser can show, so it is smaller: it excludes toolbars and tabs, and it shrinks when the window is not maximised or when you zoom.
What is device pixel ratio?
Device pixel ratio (DPR) is how many physical pixels make up one CSS pixel. High-density screens such as Retina displays have a DPR of 2 or 3, so a 1 px line in CSS is drawn with several physical pixels and looks crisp.
Why does the viewport not match my screen resolution?
Operating system display scaling, browser zoom and a device pixel ratio above 1 all change how many CSS pixels fit on screen. The numbers above are reported by your browser in CSS pixels, which is why they can be smaller than the physical resolution.
Why does screen resolution matter?
Designers and developers use it to build responsive layouts and to pick the right image sizes, so pages look sharp without wasting bandwidth. It is also one of the signals that contributes to a browser fingerprint.
Is my screen resolution sent to your server?
No. These values are read in your browser using standard JavaScript and shown only to you. We do not collect or store them.

Related Pages