Screen Size & Resolution Checker
Check your screen resolution, viewport size, device pixel ratio, and display info instantly.
Screen Resolution
800 × 600
Physical Resolution
800 × 600
Browser Viewport
800 × 600
Device Pixel Ratio
1x
Colour Depth
24-bit
Orientation
portrait primary
Understanding Screen Resolution vs Viewport Size
Your screen has two different "sizes" that matter for web development, and mixing them up causes no end of layout headaches. Screen resolution is the full display — every pixel your monitor can show. Viewport size is smaller: it's the area inside your browser window where web content actually renders, minus the address bar, tabs, and scrollbars.
Then there's device pixel ratio (DPR), which throws another spanner in the works. A Retina MacBook might report a CSS resolution of 1440×900, but its physical resolution is 2880×1800. That's a DPR of 2 — each CSS pixel gets rendered using four physical pixels. This is why text and images look sharp on high-DPI screens, but it also means you need to serve 2× images for them to look crisp.
This tool reads all these values from your browser in real time. Resize your window and the viewport dimensions update instantly.
Common Screen Resolutions
| Resolution | Name | Aspect Ratio | Common Devices |
|---|---|---|---|
| 1366×768 | HD | 16:9 | Budget laptops, older monitors |
| 1920×1080 | Full HD (1080p) | 16:9 | Most monitors, gaming displays |
| 2560×1440 | QHD (1440p) | 16:9 | Mid-range monitors, gaming |
| 3840×2160 | 4K UHD | 16:9 | High-end monitors, TVs |
| 2560×1600 | WQXGA | 16:10 | MacBook Pro 13" |
| 3024×1964 | Liquid Retina XDR | ~3:2 | MacBook Pro 14" |
| 390×844 | Mobile | ~9:19.5 | iPhone 14/15 |
| 412×915 | Mobile | ~9:20 | Samsung Galaxy S23 |
What this means for you: 1920×1080 is still the most common desktop resolution globally. But mobile traffic now exceeds 60% for most websites, so designing for 360–414px viewport widths matters more than ever.
CSS Breakpoints Reference
| Breakpoint | Tailwind Class | Target Devices |
|---|---|---|
| 640px | sm: | Large phones (landscape) |
| 768px | md: | Tablets (portrait) |
| 1024px | lg: | Tablets (landscape), small laptops |
| 1280px | xl: | Laptops, standard desktops |
| 1536px | 2xl: | Large desktops, wide monitors |
What this means for you: These Tailwind breakpoints use a mobile-first approach — styles apply from the breakpoint upward. Check your current viewport width above to see which breakpoint is active right now.
Device Pixel Ratio Explained
DPR 1× (Standard)
One CSS pixel equals one physical pixel. Common on older monitors and budget displays. Images at 1× look fine here.
DPR 2× (Retina/HiDPI)
Each CSS pixel uses 4 physical pixels (2×2). Standard on modern MacBooks, iPhones, and flagship Android devices. Serve 2× images for sharpness.
DPR 3× (Super Retina)
Each CSS pixel uses 9 physical pixels (3×3). Found on iPhone Pro Max and high-end Android phones. Consider 3× assets for hero images.
Fractional DPR (1.25×, 1.5×)
Common on Windows laptops with display scaling. Can cause sub-pixel rendering issues with thin borders and hairline rules.
Testing Responsive Designs Without Real Devices
Chrome DevTools Device Mode
Press F12 → click the device toggle icon (or Ctrl+Shift+M). You can pick preset devices or enter custom dimensions. It also simulates touch events, throttled CPU, and slow network — useful for testing how your layout behaves on a budget Android phone.
Firefox Responsive Design Mode
Ctrl+Shift+M opens Firefox's responsive view. It supports custom DPR settings — handy for testing how images render on Retina vs standard displays. You can also simulate touch and test different user agents without extensions.
Real Device Testing Services
BrowserStack and Sauce Labs give you access to real devices in the cloud. Emulators miss real-world quirks: Safari's bounce scroll, Android's soft keyboard pushing content up, notch avoidance on iPhones. For production sites, test on at least one real iOS and one real Android device.
Container Queries (Modern CSS)
Media queries respond to the viewport. Container queries respond to the parent element's size — so a card component can adapt whether it's in a sidebar or a full-width grid. Supported in all major browsers since 2023. Use @container for truly reusable responsive components.
Related Tools
Aspect Ratio Calculator
Calculate and convert aspect ratios
Image Resizer
Resize images to exact dimensions
Placeholder Image Generator
Create placeholder images for any size
PX to REM Converter
Convert pixel values to rem units
CSS Border Radius Generator
Generate border-radius with visual preview
User Agent Parser
Parse browser and device info from UA strings
How to use this tool
Open this page on any device to see its screen info
Resize your browser window to watch viewport values update live
Use the readings to configure responsive breakpoints and image sizes
Common uses
- Checking viewport size for responsive design testing
- Verifying device pixel ratio for Retina image requirements
- Debugging CSS layout issues across screen sizes
- Confirming monitor resolution and display settings
Share this tool