Detect and display your screen resolution, viewport size, pixel ratio, color depth, and device orientation.
This page reads the display numbers the browser itself holds and prints them: full screen resolution, viewport size, device pixel ratio, color depth, and orientation. The values are the browser's reported ones, not measurements, so the readout changes as you resize the window, change zoom, rotate a phone, or drag the window onto another monitor. The thing most people get wrong first: "resolution" here is in CSS pixels, the units CSS layouts actually use, so on a Retina or 200%-scaled display it is half the pixel count printed on the box, and browser zoom never changes it.
A concrete input and expected output from the current implementation.
Input
A 2560 x 1440 external monitor at 100% system scaling, browser window maximized, page zoom at 200%.
Expected output
Screen resolution: 2560 x 1440 CSS pixels (zoom does not change it). Viewport width: 1280 CSS pixels (2560 / 2). Viewport height: the window's content height, halved. Device pixel ratio: 2.0. Color depth: 24 bits. Orientation: landscape-primary.
At 200% page zoom the layout viewport halves (2560 / 2 = 1280) and the pixel ratio doubles from 1.0 to 2.0, while the screen size stays 2560 x 1440 because the browser reports the display's full CSS-pixel size regardless of zoom. The viewport height is not pinned here because it depends on the browser's own toolbar height.
Resolution is read from the browser's screen object, which reports the full display in CSS pixels: a 3024 x 1964 Retina panel reads 1512 x 982 at 2x scaling. The viewport is the window's content area inside tabs, toolbars, and scrollbars, so it is usually smaller than the screen. Pixel ratio scales CSS pixels into physical panel pixels, and color depth is almost always 24 on modern displays.
The readout updates live: resizing the window changes the viewport numbers immediately, rotating a phone flips the orientation field without a reload, and dragging the window to a second monitor brings back that display's numbers, including its own scaling. Orientation is reported as a type - portrait-primary, portrait-secondary, landscape-primary, landscape-secondary - plus an angle in degrees; on desktops it is almost always landscape-primary at 0 degrees.
No. The OS is almost certainly scaling the display, and the browser reports CSS pixels - the units layouts actually use. If the pixel ratio reads 2.0, the OS is rendering a 3840 x 2160 panel at half scale, which is what your CSS sees. A tool reporting the raw panel count would be the misleading one, because the browser and your CSS operate in the scaled units.
No, that is exactly how the numbers are defined. Page zoom shrinks CSS pixels relative to the panel: the viewport divides by the zoom (2560 becomes 1280 at 200%) and the pixel ratio multiplies by it (1.0 becomes 2.0). Screen resolution is the display's full size in CSS pixels, fixed until you change the OS scaling or move to another monitor.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.