Screen Info
Your live screen, viewport, and device values at a glance
-
Aspect Ratio: -
-
-
Updates live as you resize the window
-
-
-
-
-
-
Instantly see your screen resolution, live viewport size, devicePixelRatio, color depth, orientation, touch support, language, and timezone — all read locally from your browser, no uploads. The viewport and orientation values update in real time as you resize the window, making this a handy companion for responsive design testing and quick device checks.
How to Use
- Open the page: All values are detected automatically — nothing to type or paste.
- Read the grid: Each card shows one metric with a short label.
- Resize the window: Watch the viewport size and orientation update live.
- Use the values: Copy resolutions or ratios into your design tool, bug report, or media query.
Features
- Screen resolution with simplified aspect ratio (16:9, 4:3, …)
- Available screen size — full resolution minus OS taskbars and docks
- Live viewport size that updates on window resize
- devicePixelRatio for Retina/HiDPI detection
- Color depth in bits per pixel
- Orientation that flips between landscape and portrait as you resize
- Touch support from three independent signals
- Browser language and IANA timezone
- 100% client-side — nothing leaves your browser
Screen Resolution vs Viewport vs Available Size
These three numbers describe different rectangles, and mixing them up causes real bugs. The screen resolution is the hardware: how many physical pixels the panel has. The available size is what’s left after the operating system claims its share for taskbars and menu bars. The viewport is smaller still — it’s the drawable area inside the browser window where your page lives, and it’s the only one CSS media queries can see. A responsive layout must target the viewport, not the device resolution, which is why this tool shows both side by side and keeps the viewport value live.
Use Cases
- Responsive design: Check the live viewport width against your breakpoints while dragging the window edge.
- HiDPI assets: Read devicePixelRatio to decide between 1x, 2x, and 3x image variants.
- Bug reports: Paste your exact resolution, ratio, and DPR so others can reproduce a layout issue.
- Cross-device QA: Verify orientation and touch detection on laptops, tablets, and phones.
- Localization checks: Confirm the browser language and timezone a page will see.
Related Tools
Frequently Asked Questions
Why is my screen resolution different from my viewport size?
Screen resolution is the physical size of your display in pixels (screen.width × screen.height). The viewport is the area inside the browser window that actually renders the page — it excludes toolbars, scrollbars, and the window chrome, and it changes whenever you resize the window.
What does devicePixelRatio mean?
devicePixelRatio tells you how many physical pixels map to one CSS pixel. A value of 2 means a Retina-class display: a 1920 × 1080 CSS viewport is backed by 3840 × 2160 physical pixels. Designers use it to decide when to serve @2x or @3x images.
What is the difference between screen size and available size?
Available size (screen.availWidth × availHeight) subtracts OS-level UI like the Windows taskbar or the macOS menu bar and Dock from the full screen size. It is the largest area a maximized window can occupy.
How is touch support detected?
The tool checks three signals: navigator.maxTouchPoints, the presence of the ontouchstart event, and the (pointer: coarse) media query. If any of them is positive, the device is reported as touch-capable — which is why many 2-in-1 laptops show touch even when you mostly use a mouse.
Does this tool send my device information anywhere?
No. Every value is read locally from your browser's window and screen objects. Nothing is uploaded, logged, or shared with a server.