QA Screen Resolution Checker
Capture and export your display specs for bug reports. One-click copy for Jira, GitHub, Trello, and more.
Preview — Bug Report Data
Why Display Specs Matter in QA
When a developer receives a bug report titled "button is misaligned," the first question is always: what screen size and viewport were you using? Without display specs, developers waste time trying to reproduce the issue on the wrong resolution.
Including screen resolution, viewport size, and DPR eliminates guesswork. A button that looks perfect at 1920×1080 might break at 1366×768. A layout that works at 1x DPR might overflow at 2x. These details are the difference between a 5-minute fix and a 3-day back-and-forth.
This tool gives you a one-click formatted report you can paste directly into Jira, GitHub Issues, Trello, Asana, Linear, or any other bug tracker.
What to Include in Every Bug Report
- Screen Resolution — the physical pixel dimensions of your monitor
- Browser Viewport — the CSS pixel area available to the page (always different from screen resolution on HiDPI displays)
- Device Pixel Ratio (DPR) — tells developers if you are on a Retina / HiDPI display with OS scaling
- Color Depth — helps identify color reproduction issues
- Browser + Version — some bugs are browser-specific
- Operating System — OS-level rendering differences can cause layout shifts
How to Write a Good Bug Report
A great bug report makes it easy for developers to understand, reproduce, and fix the problem. Follow this structure:
- Title — concise summary (e.g., "Submit button overflows container at 768px viewport width")
- Description — what you expected vs. what actually happened
- Steps to reproduce — numbered steps from a known starting point
- Display specs — use this tool to paste the formatted block below
- Screenshots / screen recording — annotated with arrows or circles if helpful
- Additional context — browser extensions, network conditions, font settings, etc.
Using the "Copy for Bug Report" button above gives you a clean, structured display-spec block that fits naturally into any bug tracker's description field.
Common Resolution Breakpoints to Test
When testing responsive layouts, these are the most common viewport widths you should check. Use your browser's DevTools responsive mode (F12) to simulate each breakpoint and verify your layout handles it correctly.
| Breakpoint | Category | Typical Devices | CSS Width |
|---|---|---|---|
| 320px – 480px | Mobile portrait | iPhone SE, older Android phones | < 576px |
| 360px – 414px | Mobile portrait | iPhone 12–15, Pixel, Galaxy | < 576px |
| 576px – 767px | Mobile landscape | Phones in landscape orientation | ≥ 576px |
| 768px – 991px | Tablet portrait | iPad mini, Galaxy Tab (portrait) | ≥ 768px |
| 992px – 1199px | Tablet landscape / small desktop | iPad (landscape), small laptops | ≥ 992px |
| 1200px – 1399px | Desktop | Standard 1080p monitors (with browser chrome) | ≥ 1200px |
| 1400px – 1919px | Large desktop | 1440p monitors | ≥ 1400px |
| 1920px+ | Ultrawide / 4K | 4K monitors, ultrawide displays | ≥ 1920px |
Tip: Many layout bugs only appear at specific viewport widths. Always test at 768px and 992px — those are the most common CSS media query breakpoints used by Bootstrap, Tailwind, and most CSS frameworks.
Frequently Asked Questions
How do I report screen resolution in a bug ticket?
Use this tool to capture your exact screen dimensions, viewport size, and DPR, then click "Copy for Bug Report" to paste a formatted block into Jira, GitHub Issues, Trello, or any tracker.
What display specs should I include in a bug report?
Include screen resolution, viewport size, device pixel ratio, color depth, operating system, and browser version. This tool captures all of them automatically.
Why is viewport size important for QA testing?
Different viewport sizes trigger different CSS breakpoints and layouts. A layout that works at 1920px wide may break at 768px. Always note the viewport when reporting layout bugs.
How do I test responsive layouts across resolutions?
Use your browser's DevTools responsive mode (F12 → Toggle Device Toolbar) to simulate different device viewports. Then use this tool to capture the simulated display specs for each breakpoint.
Why does my Viewport Size differ from my Screen Resolution?
The Screen Resolution is your monitor's physical pixel dimensions. The Viewport Size is the CSS pixel area inside the browser window — it excludes browser chrome (address bar, tabs, bookmarks bar) and is affected by OS display scaling (DPR). On a 4K display at 200% scaling, the screen is 3840×2160 but the viewport is approximately 1920×1042.
What is Device Pixel Ratio (DPR) and why do I need it?
DPR is the ratio of physical pixels to CSS (logical) pixels. A DPR of 2 means each CSS pixel is rendered as a 2×2 block of physical pixels (Retina display). DPR is critical for reproducing image sharpness, icon sizing, and canvas rendering bugs. See our DPI vs PPI guide for more detail.
Can I export the data for multiple devices?
Yes. Use the Export JSON button to save a structured data file, or Export TXT for plain text. You can run this tool on each device/browser combination and collect the exports for your test matrix.