Live Pixel Test & Screen Diagnostics
Detect your viewport dimensions, pixel density, and device characteristics with 16kpixel. A diagnostic tool for web developers.
CSS Pixels (Logical)
Based on current width
Physical vs CSS pixels
Description: Your Screen, Decoded
The 16kpixel Diagnostic Tool is a dashboard designed to give developers instant access to their current screen's technical specifications. Understanding the environment in which your code is running is important for responsive design.
This tool shows the relationship between your hardware and your software. By detecting your Device Pixel Ratio (DPR), viewport dimensions, and color depth, we help you identify why a specific CSS rule might be behaving unexpectedly.
Whether you're debugging a media query or testing a responsive layout, 16kpixel provides the data you need in a clean format.
How It Works: Browser APIs and Logic
Our diagnostic tool leverages built-in browser APIs to gather information about your environment. Here's a breakdown of the data we collect:
Note: All data is processed locally in your browser. We do not store or transmit any information about your device.
Logical vs. Physical Pixels
The most important concept to understand is the difference between Logical Pixels (what you use in CSS) and Physical Pixels (the actual hardware lights on your screen).
Your current DPR is 1x. This means for every 1x1 square you define in CSS, your screen is using 1.0 physical pixels to render it.
Frequently Asked Questions (FAQ)
Why is my viewport width different from my screen resolution?
Your screen resolution refers to physical pixels. Your viewport width refers to "CSS pixels". On high-density displays, the browser scales the UI so that text isn't too small to read.
What is Color Depth?
Color depth refers to the number of bits used to represent the color of a single pixel. Higher depths allow for smoother gradients and more accurate color reproduction.
How do I test different breakpoints?
The easiest way is to resize your browser window while watching this page. You'll see the numbers update in real-time.
Why does my DPR have decimals (like 1.25x)?
This is common on Windows laptops and some Android devices. It means the OS is using "fractional scaling" to balance screen real estate and readability.