Browser Tools
What is my screen resolution?
Check your screen resolution, browser viewport size and device pixel ratio.
Screen resolution
…
CSS pixels
Viewport size
…
Resize your window to watch it change
Display details
- Physical pixels
- —
- Device pixel ratio
- —
- Available screen
- —
- Colour depth
- —
- Aspect ratio
- —
- Orientation
- —
Screen, viewport and physical pixels
Three different numbers describe your display, and mixing them up is a common source of confusion when building responsive layouts.
- Screen resolution is your entire display measured in CSS pixels — the unit every CSS length ultimately resolves to.
- Viewport size is the visible page area inside the browser. This is what media queries respond to, and what you should design against.
- Physical pixels is the hardware count: screen resolution multiplied by the device pixel ratio. It determines how large an image must be to look sharp.
Why device pixel ratio matters
A phone reporting 390 × 844 CSS pixels at a ratio of 3 has 1170 × 2532 physical pixels. An
image served at 390 pixels wide will be stretched across 1170 hardware pixels and look
noticeably blurry. This is why srcset exists: it lets the browser pick a source matched
to the device's actual density instead of guessing.
Designing for the viewport, not the screen
Users rarely browse full-screen on desktop, and browser chrome takes real space on mobile. Media queries respond to viewport width for exactly this reason. Testing at fixed "device resolutions" rather than a continuous range of viewport widths is how layouts end up breaking at sizes nobody checked.
Mobile viewport height is its own trap: address bars collapse as you scroll, so
100vh can exceed the visible area. The newer svh, lvh and
dvh units exist to address it.
Screen size and privacy
Your exact viewport dimensions are an unusually strong fingerprinting signal, because window size is close to arbitrary — far more distinguishing than screen resolution, which clusters around a handful of common panel sizes. Some privacy-focused browsers deliberately round or letterbox the reported viewport for this reason.
See the full picture on the browser info page, or check your timezone, another common fingerprint input.
Frequently asked questions
What is my screen resolution?
Your screen resolution is the size of your display in CSS pixels, shown above as width × height. On high-density displays this differs from the physical pixel count: multiply by the device pixel ratio to get actual hardware pixels.
What is the difference between screen resolution and viewport size?
Screen resolution is your whole display. Viewport is the area of the page you can actually see inside the browser window, which excludes the browser toolbar, any open developer tools and scrollbars. Responsive layouts respond to the viewport, not the screen.
What is device pixel ratio?
It is how many physical pixels the display uses for each CSS pixel. A ratio of 1 means they match. Retina and modern phone displays report 2 or 3, meaning a 1× image looks soft and a 2× or 3× version is needed to look sharp.
Why is my available screen area smaller than my screen?
Available screen area excludes space permanently reserved by the operating system — the macOS menu bar and Dock, the Windows taskbar, or a phone’s status bar. It represents the largest a window can usefully be.