Live viewport, display, and pixel ratio information from your browser
Browser viewport
pixels
Resize your browser window to see the viewport figures change in real time.
Your display has a fixed resolution, but the number that actually matters for web design is the viewport — the area inside the browser where the page is drawn. Those two figures are rarely the same, and on a high-density screen neither matches the physical pixel count, because the operating system scales the interface.
This checker reports all of them side by side: viewport size, full screen resolution, the space available after the taskbar or dock, device pixel ratio, colour depth, and which CSS breakpoint your current width falls into. It is the fastest way to answer "what size is this screen" when filing a bug report or checking a responsive layout.
Screen resolution is the full pixel size of your display. The viewport is the part of the browser actually showing the page, which is smaller because the address bar, bookmarks bar, scrollbars, and any open developer tools all take space. CSS media queries respond to the viewport, not the screen.
Because of device pixel ratio. Operating systems scale the interface on high-density displays, so a 3840-pixel-wide screen at 200% scaling reports 1920 CSS pixels. The pixel ratio figure above shows the multiplier being applied.
Test the common breakpoints rather than specific devices: around 360–430 px for phones, 768 px for tablets, 1280–1440 px for laptops, and 1920 px for desktop monitors. Resize this page to check how a layout behaves between them.
The number of bits used per pixel to store colour. 24-bit gives roughly 16.7 million colours and is the standard on virtually every modern display; 30-bit and above appears on HDR and professional monitors.
No. The values are read from your own browser with JavaScript and displayed on the page. Nothing is transmitted or stored.