Screen Info Display
Auto-detect and display screen resolution, viewport size, DPR, orientation, media query matches, touch support, and responsive breakpoints — live-updating on resize.
About This Tool
The Screen Info Display tool gives you a comprehensive, real-time snapshot of your browser and device display properties. Whether you are debugging a responsive layout, testing CSS media queries, or verifying device pixel ratio (DPR) values, this tool surfaces every metric you need in a single dashboard.
The tool auto-detects screen resolution (the physical monitor size reported by the operating system), viewport size (the CSS layout viewport, which excludes browser chrome), and window inner/outer dimensions. It also shows the device pixel ratio, which tells you how many physical pixels correspond to one CSS pixel — essential for understanding Retina and HiDPI rendering.
Orientation detection reveals whether the device is in portrait or landscape mode, along with the rotation angle. The available screen area section reports the usable space after subtracting OS-level elements like taskbars and docks.
A dedicated CSS media query matches panel shows you the live state of popular feature queries such as prefers-color-scheme, prefers-reduced-motion, pointer, and hover. This is invaluable when you need to confirm that your dark-mode or accessibility queries fire correctly on a given device.
The responsive breakpoint indicator tells you which Tailwind CSS and Bootstrap breakpoint you are currently viewing at, and highlights all active breakpoints so you can instantly see where your viewport sits in the responsive scale.
Touch capability detection reports whether the device supports touch input, the maximum number of touch points, and whether the browser exposes the TouchEvent and PointerEvent APIs. You can also check viewport size reference for a list of common device dimensions.
All data is gathered exclusively from browser APIs (window, screen, navigator, matchMedia). Nothing is sent to any server. You can copy the entire result as a JSON object for pasting into bug reports or documentation.
How to Use
- Open this page in the browser and device you want to inspect. All values are populated automatically.
- Resize your browser window and watch every metric update in real time — viewport, window dimensions, and breakpoint indicators all refresh instantly.
- Check the CSS Media Query Matches panel to verify which feature queries are active (e.g., dark mode, reduced motion).
- Look at the Responsive Breakpoint cards to see your current Tailwind and Bootstrap breakpoint, with all active breakpoints highlighted.
- Review Touch Capabilities to confirm touch support and the available input APIs.
- Click Copy as JSON (or press Ctrl+Shift+C) to copy every metric to your clipboard as a formatted JSON object.
- Use the Refresh button if you change display settings (e.g., toggling dark mode in your OS) and want an immediate update.
Popular Screen Info Topics
FAQ
What is device pixel ratio (DPR)?
Device pixel ratio is the ratio between physical pixels on the screen and CSS pixels. A DPR of 2 means each CSS pixel is rendered using a 2x2 grid of physical pixels, which is common on Retina and HiDPI displays. A DPR of 1 means there is a 1:1 mapping between CSS and physical pixels.
What is the difference between viewport size and screen resolution?
Screen resolution is the total number of pixels the monitor reports to the operating system. Viewport size is the area available for rendering web content, which excludes browser UI elements like the address bar, tabs, and scrollbars. The viewport is typically smaller than the screen resolution.
Why do innerWidth and outerWidth differ?
window.innerWidth measures the width of the browser's content area (the viewport including scrollbars). window.outerWidth measures the entire browser window including its frame, toolbars, and borders. The difference tells you how much space browser chrome occupies.
Is my data safe?
Yes. All information is read from standard browser APIs (window, screen, navigator, matchMedia) entirely in your browser. No data is ever sent to any server, and no cookies or tracking are involved.
How do I detect a Retina display?
Check if the device pixel ratio (DPR) is greater than 1. Most Retina displays have a DPR of 2 or 3. You can also use the CSS media query (min-resolution: 2dppx) or (-webkit-min-device-pixel-ratio: 2) to target high-DPI displays in stylesheets.
What does prefers-reduced-motion mean?
prefers-reduced-motion is a CSS media query that detects whether the user has enabled a system-level setting to minimize non-essential animations. When it matches 'reduce', you should disable or simplify CSS transitions and JavaScript animations to improve accessibility for users with vestibular disorders.
How accurate are the breakpoint indicators?
The breakpoint indicators use the same min-width thresholds defined in the official Tailwind CSS and Bootstrap documentation. They compare your current viewport width against these thresholds, so the result is identical to what CSS media queries would evaluate.
Related Tools
Browser Feature Detector
Detect and display your browser's API support status across 50+ web platform features including WebGL, WebGPU, Service Workers, and more.
User-Agent Parser
Parse and analyze any User-Agent string to identify browser, OS, device type, rendering engine, and detect bots/crawlers.
Viewport Size Reference
Browse 60+ device viewport sizes for responsive web design. Compare iPhone, iPad, Android, laptop, desktop, and TV screen dimensions.
px ↔ rem Converter
Convert between px, rem, and em CSS units with a configurable base font size and quick-reference table.
Accessibility Color Checker
Check WCAG 2.1 color contrast ratios for AA and AAA compliance. Test foreground and background color pairs with live preview.