Tool Name
Viewport / Screen Info
Proposed Filename
viewport-screen-info.html
Category
Browser & Network
Description
A standalone browser-based utility that displays detailed information about the user's browser, screen, and viewport in real time. The tool helps developers inspect viewport dimensions, screen resolution, pixel density, orientation, color depth, and other browser environment details without opening developer tools. All information is gathered locally using standard browser APIs and updates automatically as the window or device changes.
Key Features
Display viewport width and height.
Display screen resolution and available screen size.
Show device pixel ratio (DPR).
Display screen orientation (Portrait/Landscape).
Show color depth and pixel depth.
Display browser window dimensions (inner and outer size).
Detect touch support and maximum touch points.
Show current URL, protocol, hostname, and user agent.
Live updates on window resize and orientation changes.
Copy all device information to the clipboard.
Fully responsive, keyboard accessible, and works entirely offline.
Suggested Difficulty
Easy
Tags
viewport, screen, browser, responsive, device, debugging, javascript, developer-tools
References / Inspiration
MDN Web Docs – Window API
MDN Web Docs – Screen API
MDN Web Docs – Visual Viewport API
CSSOM View Module
Pre-submission Checklist
Tool Name
Viewport / Screen Info
Proposed Filename
viewport-screen-info.html
Category
Browser & Network
Description
A standalone browser-based utility that displays detailed information about the user's browser, screen, and viewport in real time. The tool helps developers inspect viewport dimensions, screen resolution, pixel density, orientation, color depth, and other browser environment details without opening developer tools. All information is gathered locally using standard browser APIs and updates automatically as the window or device changes.
Key Features
Display viewport width and height.
Display screen resolution and available screen size.
Show device pixel ratio (DPR).
Display screen orientation (Portrait/Landscape).
Show color depth and pixel depth.
Display browser window dimensions (inner and outer size).
Detect touch support and maximum touch points.
Show current URL, protocol, hostname, and user agent.
Live updates on window resize and orientation changes.
Copy all device information to the clipboard.
Fully responsive, keyboard accessible, and works entirely offline.
Suggested Difficulty
Easy
Tags
viewport, screen, browser, responsive, device, debugging, javascript, developer-tools
References / Inspiration
MDN Web Docs – Window API
MDN Web Docs – Screen API
MDN Web Docs – Visual Viewport API
CSSOM View Module
Pre-submission Checklist