Screen Information Detector
Your browser, screen, device, network, and battery details — detected instantly with zero data sent to any server.
What This Tool Detects
The Screen Information Detector reads data from multiple browser JavaScript APIs and presents it in a clear, organized format. This is useful for debugging responsive design issues, testing across different devices, generating bug reports, and understanding exactly what capabilities a user's browser has.
Screen Properties
- Screen Width × Height — total physical pixel dimensions of the display
- Viewport Width × Height — the usable area of the browser window (changes when you resize or zoom)
- Device Pixel Ratio (DPR) — ratio of physical pixels to CSS pixels (2x on Retina, 3x on mobile high-DPI displays)
- Color Depth — bits per pixel (24 = 16.7M colors, 30 = HDR)
- Orientation — portrait or landscape, and the rotation angle
Browser and Device Properties
- User Agent — the raw browser identification string
- Browser & Version — detected browser name and major version
- Operating System — detected platform (Windows, macOS, iOS, Android, Linux)
- Touch Support — whether the device reports touch input capability
- Max Touch Points — maximum simultaneous touch points the hardware supports
- Language — browser locale setting
- Timezone — IANA timezone string from Intl API
- Cookie & JavaScript enabled — basic capability flags
Network Information (where available)
The Network Information API (supported in Chrome and Edge) exposes the connection effective type, estimated downlink speed, and round-trip time. This helps developers build adaptive experiences — loading lighter assets on slow connections or enabling offline-first features when online connectivity is poor.
Battery Status (where available)
The Battery Status API (supported in Chrome/Android) reports the charging state, battery level percentage, and estimated time to full charge or discharge. While less commonly needed, this can help power-aware web apps reduce CPU-intensive operations when battery is low.
Media Query Results
This tool also tests a set of standard CSS media queries in real time and shows which ones match your current device and viewport. This is extremely useful for debugging why a responsive layout is not applying the expected styles — you can see exactly which breakpoints are active and which feature queries (hover, pointer type, prefers-color-scheme, prefers-reduced-motion) apply to your environment.