Viewport Size
Live window dimensions, screen resolution, device pixel ratio, and CSS breakpoint detection for responsive design testing.
Back to all tools on ToolForge
Current Dimensions
Window Inner
Document
Screen Size
Available
Device Pixel Ratio
Color Depth
Breakpoint
About Viewport Size
This viewport size tool displays real-time window dimensions, screen resolution, device pixel ratio, color depth, and CSS breakpoint detection for responsive web design testing and debugging.
It is useful for responsive design development, mobile layout testing, debugging viewport-dependent CSS, verifying media query breakpoints, checking HiDPI/Retina display rendering, and ensuring consistent UI behavior across different screen sizes and device pixel ratios.
Viewport Dimension Properties
| Property | Description | Use Case |
|---|---|---|
| window.innerWidth | Viewport width including scrollbar | Responsive breakpoints |
| window.innerHeight | Viewport height including scrollbar | Full-screen layouts |
| document.documentElement.clientWidth | Viewport width excluding scrollbar | Content area calculations |
| screen.width | Physical screen resolution (CSS pixels) | Device detection |
| screen.availWidth | Available width (excludes OS taskbar) | Maximized window sizing |
| window.devicePixelRatio | Physical pixels per CSS pixel | HiDPI image assets |
CSS Breakpoint Ranges
Common responsive design breakpoints (mobile-first approach):
| Breakpoint | Width Range | Target Device |
|---|---|---|
| xs (extra small) | <640px | Phones (portrait) |
| sm (small) | 640–768px | Large phones, small tablets |
| md (medium) | 768–1024px | Tablets (landscape) |
| lg (large) | 1024–1280px | Small laptops, desktops |
| xl (extra large) | 1280–1536px | Standard desktops |
| 2xl (2x extra large) | ≥1536px | Large monitors, 4K displays |
Device Pixel Ratio Examples
DPR determines how many physical device pixels represent one CSS pixel:
| DPR | Physical Pixels per CSS Pixel | Common Devices |
|---|---|---|
| 1x | 1:1 | Standard desktop monitors |
| 2x | 2×2 = 4:1 | iPhone, MacBook Retina |
| 3x | 3×3 = 9:1 | iPhone Pro Max, flagship Android |
| 4x+ | 4×4 = 16:1+ | High-end smartphones |
// Image asset recommendation:
CSS size: 100×100px
DPR 1x: use 100×100px image
DPR 2x: use 200×200px image (@2x)
DPR 3x: use 300×300px image (@3x)
// Responsive images with srcset:
<img src="image-1x.jpg"
srcset="image-2x.jpg 2x, image-3x.jpg 3x"
alt="Example">
Viewport Meta Tag
The viewport meta tag controls how a webpage is displayed on mobile devices:
<!-- Standard responsive viewport --> <meta name="viewport" content="width=device-width, initial-scale=1">