Test and analyze your browser's resolution, viewport size, and responsive breakpoints
Screen Resolution
0 × 0
Physical screen size
Browser Window
0 × 0
Current window size
Viewport
0 × 0
Content area (excludes browser UI)
Available Space
0 × 0
Screen minus taskbar
Pixel Ratio
1x
Color Depth
0-bit
Orientation
🖥️
Zoom Level
100%
Current Breakpoint
Width Range
0px - px
Select a device to see how your content would appear
This box helps visualize how content scales with different resolutions
Browser resolution testing helps developers understand how websites appear across different devices and screen sizes. It's essential for creating responsive designs that work everywhere.
The total number of pixels your monitor has. A 1920×1080 screen has 2,073,600 pixels. This is fixed hardware resolution.
The current size of your browser window, including toolbars, scrollbars, and the viewport. Changes when you resize.
The area where your website content is displayed, excluding browser UI elements. This is what CSS media queries look at.
How many physical pixels equal one CSS pixel. Retina displays have 2x or 3x ratios for sharper images.
| Breakpoint | Width Range | Typical Devices | Framework Names |
|---|---|---|---|
| Mobile (Small) | 0-374px | iPhone SE, older phones | xs (Tailwind) |
| Mobile (Large) | 375-639px | iPhone 12/13/14, Pixel 5 | sm (Tailwind) |
| Tablet (Portrait) | 640-767px | iPad Mini, Kindle | md (Tailwind) |
| Tablet (Landscape) | 768-1023px | iPad Air, iPad Pro | lg (Tailwind) |
| Desktop | 1024-1279px | Small laptops, 720p displays | xl (Tailwind) |
| Desktop (Large) | 1280-1535px | 1080p displays, most desktops | 2xl (Tailwind) |
| Ultrawide | 1536px+ | 4K displays, ultrawide monitors | 3xl+ (custom) |
Use percentages, em, rem, and vw/vh instead of fixed pixels. This ensures content scales properly across resolutions.
Design for mobile first, then progressively enhance for larger screens using min-width media queries. This ensures good performance on all devices.
While browser tools are great, always test on real devices. Touch interactions, screen quality, and performance can differ from emulation.
Provide high-resolution images (2x, 3x) for devices with high pixel ratios. Use srcset or picture elements for responsive images.
Use your browser's Developer Tools (F12) to test different resolutions. Chrome's Device Toolbar lets you simulate any device and even throttle network speeds to test performance.