Viewport Preview
Resize your browser window to see values update in real-time
What does a screen resolution tester show?
This tool reads your browser's live window.screen and window properties and displays them as human-readable numbers: physical screen resolution, current viewport size (the area actually available to the page, excluding browser chrome), device pixel ratio, effective resolution (screen size multiplied by pixel ratio, i.e. actual physical pixels), orientation, color depth, and aspect ratio — plus which Tailwind CSS breakpoint your current viewport falls into.
The distinction between screen resolution and viewport size trips a lot of people up: screen resolution is the monitor's native pixel count, viewport size is how much of that is actually usable by a web page after subtracting the browser's toolbar, tabs, and any docked panels. Device pixel ratio (DPR) matters separately because high-DPI "Retina" displays report a lower logical resolution than their physical pixel count — a MacBook's 2880×1800 physical panel often reports as 1440×900 with DPR 2.
When to use it
Use it when debugging a responsive layout bug that only reproduces on a specific device or browser window size, verifying which Tailwind (or other framework) breakpoint a real device actually lands in rather than guessing from marketing specs, or checking whether a design that looks right on your monitor will hold up on a high-DPI or ultrawide screen. It's also handy for quickly confirming devicePixelRatio when debugging blurry images or canvas rendering — a common cause of soft-looking exports is generating them at 1x when the display is 2x or 3x.
Because it reads live browser state rather than accepting any input, there's no file or data to process — just resize your window or view the page on different devices to see the numbers update in real time.
Example
Open the tool on a 14-inch MacBook Pro with the browser windowed rather than full-screen: Screen Resolution might read 1512×982 with DPR 2x, Viewport Size 1200×800, giving an Effective Resolution of 3024×1964 — and the breakpoint indicator shows "lg (768-1023px)" is wrong and it's actually landed in "xl" territory once you check the exact viewport width against your Tailwind config's breakpoints.
How to use the Screen Resolution Tester tool
- 1
Open the tool on the device you want to test
The numbers reflect your actual current browser and screen, not a simulation.
- 2
Read the stat grid
Screen resolution, viewport size, device pixel ratio, effective resolution, orientation, color depth, and aspect ratio.
- 3
Resize the window
All values update live, along with the Tailwind breakpoint indicator.
- 4
Check the viewport preview
Shows your current viewport dimensions against common breakpoint markers for quick visual reference.
Frequently asked questions
Is any of my device information sent to a server?
No. Every value comes from the browser's own window.screen and window APIs, read and displayed entirely client-side.
Why is my screen resolution different from what my monitor's spec sheet says?
On high-DPI displays, the OS often reports a scaled logical resolution rather than the physical pixel count. Multiply the reported resolution by the device pixel ratio to get the true physical pixel count.
Why does viewport size not match screen resolution?
Viewport size excludes browser chrome — tabs, address bar, bookmarks bar, any devtools panel — so it's always equal to or smaller than the full screen resolution, and changes if you resize or maximize the window.
Can I test how a page looks on a specific device I don't own?
Not with this tool — it only reports the device you're currently using. Use your browser's devtools responsive/device emulation mode to simulate other screen sizes.
Related on TechLogHub
Related Network Tools
Get the next tool before you need it
One email a week: new and trending developer tools, fresh comparisons, and what shipped. Unsubscribe in one click.