Screen Resolution Tester
Check your current screen resolution, viewport, pixel ratio, and responsive breakpoints.
Current Responsive Breakpoint
Common Screen Resolutions
| Name | Resolution | Ratio | Device |
|---|---|---|---|
| 360×800 | 360×800 | 16:9 | Common Android phone |
| 390×844 | 390×844 | ~9:19.5 | iPhone 12/13/14 |
| 414×896 | 414×896 | ~9:19.5 | iPhone XR/11 |
| 768×1024 | 768×1024 | 3:4 | iPad |
| 1024×768 | 1024×768 | 4:3 | iPad landscape / old laptop |
| 1280×720 | 1280×720 | 16:9 | HD laptop |
| 1366×768 | 1366×768 | ~16:9 | Most common laptop |
| 1440×900 | 1440×900 | 16:10 | MacBook 13" |
| 1920×1080 | 1920×1080 | 16:9 | 1080p desktop |
| 2560×1440 | 2560×1440 | 16:9 | QHD / 27" monitor |
| 3840×2160 | 3840×2160 | 16:9 | 4K display |
Frequently Asked Questions
What is device pixel ratio (DPR)?▼
DPR (or window.devicePixelRatio) is the ratio of physical pixels to CSS pixels. A DPR of 2 means 1 CSS pixel = 2×2 physical pixels — this is 'Retina' or HiDPI. For sharp images on high-DPR screens, you need to serve 2× or 3× resolution images. Use the srcset attribute or CSS image-set().
What is the difference between screen resolution and viewport?▼
Screen resolution is the total physical pixel count of your display (e.g., 2560×1600). Viewport is the usable area of the browser window in CSS pixels — which accounts for DPR, browser chrome, and zoom level. For responsive design, viewport width (window.innerWidth) is what matters, not screen resolution.
What are the Tailwind CSS breakpoints?▼
Tailwind's default breakpoints: sm = 640px, md = 768px, lg = 1024px, xl = 1280px, 2xl = 1536px. These are minimum widths — styles at sm: apply from 640px and up. Bootstrap uses similar values: sm = 576px, md = 768px, lg = 992px, xl = 1200px, xxl = 1400px.
What resolution should I design for?▼
Design for the most common viewport: 1366px is the most common laptop width. For mobile-first: start at 375px (iPhone SE/modern iPhone in portrait). For widescreen: 1920px. Always test at 320px (small phone) and above 1440px. Use Chrome DevTools device toolbar to simulate any resolution.