Display current screen resolution, viewport size, device pixel ratio, and color depth information.
The tool reads the live values a page's layout actually uses: the logical screen size (window.screen), the viewport content area (innerWidth and innerHeight), the device pixel ratio, and color depth. It needs no input and runs entirely in the page, so nothing is sent anywhere. The thing most people trip on: every number is in CSS pixels, not physical pixels, so a 2560x1600 Retina panel typically reports 1280x800 at a device pixel ratio of 2. The readout also changes as you resize the window, zoom the page, or move it between monitors, since it re-reads the properties live.
A concrete input and expected output from the current implementation.
Input
Resize the browser window so the page content area is exactly 1200x800 CSS pixels, then open the tool on a laptop whose 2560x1600 panel runs at 2x system scaling.
Expected output
Screen: 1280x800 (logical) | Device pixel ratio: 2 | Viewport: 1200x800 | Color depth: 24 bits
The panel's 2560x1600 physical pixels divided by the 2x scale factor give the 1280x800 logical screen the OS exposes (2560/2 = 1280, 1600/2 = 800). The viewport is simply the content area you sized, independent of the display. Color depth is 24 bits unless the system is driving 30-bit output.
On load, the tool reads window.screen.width and height, screen.availWidth and availHeight (the area outside the OS taskbar or Dock), screen.colorDepth and pixelDepth, window.devicePixelRatio, and window.innerWidth and innerHeight. It re-reads them on resize and zoom events, and the screen values follow whichever display the window currently sits on, so dragging the window to a second monitor updates the readout.
CSS pixels are the unit layout and media queries measure in; physical pixels are the panel's. devicePixelRatio is the multiplier between them: physical = logical x ratio. macOS 'looks like' scaling keeps the ratio at 2 and varies the logical size, while Windows scaling produces fractional ratios such as 1.25 or 1.5. Page zoom multiplies the ratio further, so the number rises as you zoom in.
Because those are CSS pixels, the unit that CSS layout and media queries actually use. The OS exposes the panel at a scale factor, here 2x, and the browser reports the logical size. Multiplying 1280x800 by the device pixel ratio of 2 gives exactly the 2560x1600 physical pixels. The reading is correct for what your code sees, which is what matters for responsive work.
Page zoom changes the CSS pixel scale rather than the hardware: zooming in multiplies devicePixelRatio and shrinks the reported innerWidth and innerHeight, while physical pixels stay constant. The tool reports live values, so capture readings at the exact zoom level and window size you intend to test, and note the zoom in any report.
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.