Screen Resolution Reference
Your data never leaves your browserBrowse a complete reference table of common device screen resolutions, viewports, and pixel ratios.
Options
Brie — Bug Reporting Tool
Found a bug while testing?
Brie captures screenshots, console logs, network data, and session replays in one click — so developers get the full context without the back-and-forth.
About Screen Resolution Reference
A comprehensive, filterable reference covering screen resolutions for iPhones, iPads, Android devices, desktop monitors, and MacBooks. Each entry shows the physical pixel resolution, the CSS viewport size in logical pixels, the device pixel ratio, and the corresponding Tailwind CSS breakpoint — everything you need when writing responsive tests, configuring emulators, or documenting cross-device support matrices. Filter by device category to focus on just the platform you are testing.
How to use
- Open the tool — all device categories are displayed immediately.
- Use the "Filter" option to narrow the list to a specific platform (iPhone, iPad, Android, Desktop, or Laptop).
- Copy the table into your test plan, bug report, or documentation.
More QA & Testing Tools
User Agent Parser
Parse a user agent string into browser, engine, OS, and device type.
Bug Report Template Generator
Generate a structured bug report template tailored to UI, API, performance, security, or accessibility bugs.
HTTP Status Code Reference
Browse the complete reference of HTTP status codes grouped by category.
Frequently Asked Questions
FAQs about Screen Resolution Reference
What is the difference between resolution and viewport?
Resolution is the physical pixel count of the screen (e.g. 1170 × 2532 on iPhone 14). Viewport is the size in CSS logical pixels that the browser uses for layout (e.g. 390 × 844). The ratio between them is the device pixel ratio.
What is device pixel ratio (DPR)?
Device pixel ratio is the number of physical pixels per CSS pixel. A DPR of 3× means a 1 × 1 CSS pixel is rendered using a 3 × 3 grid of physical pixels, resulting in sharper images on high-density (Retina) screens.
What CSS breakpoints are shown?
Breakpoints follow the Tailwind CSS scale: sm (≥640px), md (≥768px), lg (≥1024px), xl (≥1280px), and 2xl (≥1536px), based on the CSS viewport width in landscape or portrait orientation.
Why does iPhone show a smaller viewport than its resolution?
Modern iPhones have high pixel-density "Retina" displays. The browser maps multiple physical pixels to a single CSS pixel, so a 1170 × 2532 screen behaves like a 390 × 844 viewport. This prevents tiny text and touch targets on high-DPI displays.
How should I use this in device testing?
Use the viewport column to configure browser emulation (e.g. in Chrome DevTools or Playwright). Use the resolution column to configure screenshot tools or physical device emulators that work in physical pixels.