Screen resolution checker
See your screen size, viewport, and pixel ratio.
Viewport
—
The usable browser window area (what your page actually gets).
Screen
—
Your display's logical resolution as reported by the browser.
Pixel ratio
—
Physical pixels per CSS pixel. 1 = standard; 2+ = Retina / high-DPI.
- Physical pixels
- —
- Available screen
- —
- Document client
- —
- Color depth
- —
- Color gamut
- —
- Orientation
- —
- Touch points
- —
Values update when you resize the window or rotate your device.
About this tool
Your screen has a physical size in pixels, but your browser doesn't always see all of them — and what designers call the "viewport" is smaller still. This tool shows both at once, plus device pixel ratio (Retina / high-DPI scaling), colour depth, colour gamut, orientation, and user-preference flags like dark mode and reduced motion. Values update the instant you resize the window or rotate your device, useful for testing responsive layouts without opening devtools.
Frequently asked questions
Screen size and viewport are different — why?
Screen size is your whole display. Viewport is the area your browser window currently occupies, minus the address bar, bookmarks bar, and scrollbars. Responsive CSS breakpoints trigger on viewport width, not screen width.
What is device pixel ratio?
The number of physical pixels your device packs into one CSS pixel. A Retina display typically has a ratio of 2 or 3, so a "100px" CSS box is actually 200 or 300 hardware pixels wide. That's why text and images look sharp even when the logical resolution is small.
Why does the screen size differ between browsers?
Different browsers handle system-level scaling differently — and some report your monitor's physical resolution while others report the scaled one. Mobile browsers often lie about the viewport deliberately to make desktop-designed sites render reasonably.