Screen Size Finder
Live details about your screen, viewport and browser display settings — read directly from your device, updated as you resize.
Viewport (browser window)
Resize your browser window and watch these numbers update live.
Display details
| Screen resolution | — |
| Available screen (minus taskbar) | — |
| Device pixels for viewport | — |
| Device pixel ratio | — |
| Color depth | — |
| Screen orientation | — |
| Bootstrap breakpoint | — |
| Touch points | — |
Browser identity
On-screen ruler
CSS defines 96 px = 1 inch, so this ruler is drawn at exactly that scale. On most screens it is only approximate, because monitors vary in physical pixel size.
How to use
- Open this page on the device you want to measure.
- Read the live viewport size at the top — it updates as you resize or rotate.
- Use the display table for screen resolution, pixel ratio, color depth and breakpoint.
- Compare the on-screen ruler against a physical ruler if you need a rough scale check.
CSS pixel vs device pixel: your browser lays pages out in CSS pixels. Device pixels are the real hardware dots — multiply CSS pixels by the device pixel ratio to get device pixels.
Frequently Asked Questions (FAQ)
What is the difference between viewport and screen size?
Screen size is your whole display in device pixels. The viewport is the browser window area in CSS pixels, which is what web pages actually use for layout.
What does device pixel ratio mean?
It is how many device pixels fit into one CSS pixel. Multiply your CSS pixel width and height by this ratio to get the true device pixel count.
Does this tool save any data?
No. All values are read live from your browser, update as you resize, and nothing is uploaded or stored.
What is the breakpoint readout for?
It shows which CSS breakpoint your viewport falls into, from xs up to xxl, which is handy when testing responsive layouts.
What is the on-screen ruler for?
It is a rough scale check. Compare it against a real ruler if you need an approximate physical size reference.