Read the top summary first
The first card tells you the current viewport in CSS pixels, the approximate device-pixel screen size, and the most important context chips such as device class, orientation, breakpoint, DPR, and zoom.
Free, privacy-first
What Is My Screen Resolution?
See your screen resolution, viewport, DPR, zoom, and responsive breakpoints instantly in a browser-based tool built for QA, design, and debugging.
Live screen and viewport workspace
Interpretation and next steps
The section below explains how to read the live measurements, how they affect responsive design, and where to go next if you are debugging device-specific issues.
Why this screen resolution checker is more useful than a basic viewport readout
Most "what is my screen resolution" pages stop after showing width, height, and DPR. That is not enough when you are debugging responsive layouts, checking screenshot dimensions, explaining zoom behavior to a client, or reproducing a mobile bug. This page separates reported screen CSS pixels, approximate device pixels, layout viewport size, visual viewport size, browser chrome overhead, and common breakpoint systems in one place.
- See the difference between <strong>reported screen size</strong>, <strong>viewport size</strong>, and <strong>approximate device-pixel output</strong>.
- Check current <strong>Tailwind</strong>, <strong>Bootstrap</strong>, and <strong>generic responsive breakpoints</strong> instantly.
- Track <strong>resize history</strong> and save <strong>local snapshots</strong> for QA, bug reports, and screenshot workflows.
- Keep everything <strong>local in the browser</strong> so sensitive device or environment details are not uploaded.
How to interpret the live result correctly
Start with the viewport width, because it is usually the number that decides media queries and responsive layout shifts. Then use screen size and DPR to understand how the device actually renders those CSS pixels.
- Use <strong>Viewport (CSS px)</strong> when you need to know which responsive layout the page is actually using.
- Use <strong>Approx screen pixels</strong> when you care about screenshot sharpness, canvas density, or image export quality.
- Use <strong>Visual viewport</strong> and <strong>Zoom</strong> when the visible page area changes without a normal window resize.
- Use <strong>Browser chrome delta</strong> when a customer says the page feels cramped on mobile even though the device screen itself is large.
Important assumptions
- Browser APIs report screen dimensions in CSS-oriented values, not guaranteed raw panel hardware pixels.
- Approximate device pixels are derived from <strong>reported screen CSS pixels × DPR</strong>.
- Zoom, visual viewport changes, browser chrome, and OS UI can all make the usable page area smaller than the reported screen.
How to use the tool effectively
This layout is designed so you can answer the main question in a few seconds on a phone, then open deeper diagnostics only if you need them.
Check breakpoints if you are debugging layout shifts
Open the Breakpoints panel to see how the current width maps to Tailwind, Bootstrap, and common responsive buckets, plus how far you are from the next breakpoint.
Use history when you resize, rotate, or zoom
The History panel shows recent viewport states and lets you save local snapshots when you need repeatable QA notes or bug report evidence.
Open Advanced only when you need browser-level detail
The Advanced panel adds visual viewport data, hover and pointer capability, color gamut, reduced motion, language, platform, and user agent details.
Example use cases
These examples mirror the most common reasons people search for a screen resolution checker or viewport test.
Mobile casual user
You want to know the resolution and usable viewport of your phone for a screenshot or app setting.
Situation
- Check first
- Viewport (CSS px)
- Then compare
- Approx screen pixels
Best next step: Use the copy or share action from the summary card.
Viewport tells you how websites lay out; approximate device pixels help with image export expectations.
Developer testing responsive layouts
You need to know why a page has moved into a different Tailwind or Bootstrap range.
Situation
- Check first
- Current viewport width
- Then open
- Breakpoints panel
Best next step: Compare the current width against the next breakpoint distance.
This is faster than mentally mapping widths to multiple framework breakpoint systems.
Designer checking zoom and visible space
You need to confirm how much space is really visible after browser zoom or mobile UI overlays.
Situation
- Check first
- Visual viewport
- Then compare
- Viewport and browser chrome delta
Best next step: Look for a mismatch between layout viewport and visual viewport.
That mismatch usually explains why the page feels more cramped than the raw screen size suggests.
Frequently asked questions
Why is my viewport smaller than my screen resolution?
Your reported screen size describes the larger display context, while the viewport is the area the current page can actually use inside the browser window. Browser chrome, system UI, scrollbars, and zoom can all reduce the viewport.
What is the difference between screen pixels and CSS pixels?
CSS pixels are the layout units the browser uses for sizing and media queries. Device pixels are the hardware-level pixels on the panel. High-DPI screens often use multiple device pixels for each CSS pixel.
What is a good way to check responsive breakpoints quickly?
Start with the live viewport width, then compare it against the framework ranges you actually use. This tool shows Tailwind, Bootstrap, and generic responsive buckets side by side so you do not have to translate widths manually.
Does browser zoom change viewport size?
Yes. Zoom can change the visible viewport and sometimes the relationship between layout viewport and visual viewport. That is why zoom and visual viewport measurements are shown separately here.
Are my measurements sent to a server?
No. The tool reads browser-reported values locally and keeps summaries, history, and saved snapshots in the browser unless you choose to copy, share, or export them yourself.
Why does my phone report a smaller screen size than the marketing specs?
Marketing specs usually list native hardware pixels. Browsers often expose CSS-oriented screen values that are easier for layout logic, which is why the browser-reported size can look smaller while DPR explains the sharper output.