Screen Resolution Checker
Detect your screen resolution, viewport size, device pixel ratio, colour depth and orientation. Shows which CSS/Tailwind breakpoints match your current screen width.
✅ Auto-detect 📱 DPR & Physical px 📐 Breakpoints 🔒 Private
📱
Screen Resolution Checker📱
Physical Pixel Count
Calculates actual hardware pixels using screen × device pixel ratio.
📐
CSS Breakpoint Matching
Shows which Tailwind and Bootstrap breakpoints your screen matches.
🔄
Live Resize
Values update live as you resize the browser window.
🔒
Private
All detection uses the screen and window APIs. Nothing sent anywhere.
⭐ User Reviews
A
Alex T.
Yesterday
⭐⭐⭐⭐⭐
Loads instantly and shows exactly what I needed. No ads, no sign-up. This is bookmarked permanently.
Web ToolsS
Sara K.
2 days ago
⭐⭐⭐⭐⭐
Clean, accurate and fast. The copy buttons save so much time — I use this in my daily dev workflow.
Web ToolsD
Dan M.
1 week ago
⭐⭐⭐⭐⭐
Best version of this tool I've found. The breakdown is thorough and easy to read even for non-technical users.
Web ToolsL
Laura B.
2 weeks ago
⭐⭐⭐⭐⭐
Incredibly useful. The information shown here helped me debug a browser compatibility issue in minutes.
Web Tools📖 How to Use
1
Load the page
Screen size is detected automatically and shown with a visual diagram.
2
Read all metrics
Resolution, DPR, viewport, colour depth and orientation all shown.
3
Check breakpoints
Scroll down to see which CSS frameworks' breakpoints match.
4
Resize to test
Resize your browser window — values update live.
🎯 Related Tools
❓ FAQ
What is device pixel ratio (DPR)?+
DPR is the ratio of physical pixels to CSS pixels. A DPR of 2 (Retina) means 4 physical pixels for every 1 CSS pixel. High DPR screens display sharper text and images but require 2x or 3x images for crisp display.
What is the difference between screen resolution and viewport?+
Screen resolution is the total physical display size (e.g. 1920×1080). Viewport is the browser window's available area minus browser chrome (toolbars, tabs). CSS layouts respond to viewport size, not screen resolution.
What are CSS breakpoints?+
Breakpoints are viewport width thresholds at which CSS layouts adapt. Tailwind CSS uses: sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px). Bootstrap uses: sm (576px), md (768px), lg (992px), xl (1200px), xxl (1400px).
What colour depth does my screen support?+
Most modern displays support 24-bit colour (16.7 million colours). Professional displays support 30-bit (10-bit per channel). The screen.colorDepth property returns the bit depth. 32-bit includes an alpha channel.
How do I find my screen resolution on Windows or Mac?+
Windows: Settings → System → Display → Resolution. Mac: System Settings → Displays. This tool shows the resolution directly without navigating to system settings.