đ¯ What is this dashboard?
This dashboard provides real-time information about your browser
window, screen, and device properties. It's perfect for web
developers, designers, and anyone curious about their display
setup.
đą Viewport Information
Inner Width/Height: The visible area inside your
browser window (excluding toolbars, scrollbars)
Client Width/Height: Similar to inner dimensions,
but measured differently
Scroll Width/Height: Total content size including
parts that require scrolling
đŧī¸ Browser Window
Outer Width/Height: Total browser window size
including toolbars and borders
Screen X/Y: Position of your browser window on
the screen
Scroll X/Y: How far you've scrolled
horizontally/vertically
đĨī¸ Screen Properties
Screen Width/Height: Your monitor's full
resolution
Available Width/Height: Usable screen space
(excluding taskbars, docks)
Color/Pixel Depth: How many colors your display
can show
đ˛ Device Information
Device Pixel Ratio: How many physical pixels = 1
CSS pixel (important for high-DPI displays)
Orientation: Portrait, landscape, etc.
Touch Support: Whether your device supports touch
input
đ¨ CSS Media Queries
Information about user preferences and capabilities:
-
Dark Mode: User's system color scheme
preference
-
Reduced Motion: Accessibility setting for
motion sensitivity
-
Hover Support: Whether you can hover (mouse vs
touch)
-
Pointer Type: Fine (mouse) vs Coarse (touch)
input
đ§ Calculated Values
Browser Zoom: How much you've zoomed in/out in
your browser
System Scale: Your operating system's display
scaling setting
DPI: Dots per inch - pixel density of your
display
Physical Dimensions: Estimated real-world size of
your screen
đĄ Tips
-
Resize your browser window and watch values update in real-time
- Try zooming in/out to see browser zoom detection
- Use this for responsive design testing and debugging
- Perfect for web developers working on responsive layouts