What Is My Screen Resolution

Current display

{{ screenWidth }} x {{ screenHeight }}

Viewport {{ viewportWidth }} x {{ viewportHeight }} CSS px inside available screen {{ screenAvailWidth }} x {{ screenAvailHeight }}.

{{ selectedBreakpointSet.summary }} Viewport lane: {{ viewportLane.label }} DPR {{ formattedDevicePixelRatio }} {{ viewportShareBadge }} {{ physicalDensityBadgeText }}

Breakpoint guide:

{{ warning }}

Display diagonal:

Metric	Value	Copy
{{ row.key }}	{{ row.value }}

Lane	Min width	Viewport	Screen	Use
{{ row.label }}	{{ row.value }}	{{ row.value }}	Current reading	{{ row.detail }}
{{ row.label }}	{{ row.value }}	{{ row.value }}	Action queue	{{ row.detail }}
{{ row.lane }}	{{ row.threshold }}	{{ row.viewportStatus }} {{ row.viewportDetail }}	{{ row.screenStatus }} {{ row.screenDetail }}	{{ row.use }}
Media-query starter	—	Handoff	Responsive work	`{{ handoffSnippet }}`

Signal	Value	Reading	Detail	Copy
{{ row.label }}	{{ row.value }}	{{ row.value }}	{{ row.detail }}

Target	Pixels	MP	Use	Copy
{{ row.target }}	{{ row.pixels }}	{{ row.megapixels }}	{{ row.use }}

Embed:

Customize

Include current inputs

Size

Advanced

Width

Height

Aspect ratio

Max height

Collapsible embed

Allow fullscreen

Referrer policy

Sandbox tokens

A screen resolution such as 1920 x 1080 is a coordinate grid, not a full description of what a web page, screenshot, or responsive layout can use.

Modern displays separate several measurements that people often collapse into one number. The screen reports a CSS-pixel coordinate space. The browser viewport is the part of that space currently available to the page. Device-pixel ratio, often shortened to DPR, describes how many physical display pixels are used to draw one CSS pixel. Those values can disagree when the browser is zoomed, the operating system is scaled, the window is snapped to part of the screen, or the page is running on a high-density phone or laptop panel.

Responsive design depends mainly on viewport width in CSS pixels. A large monitor can still show a narrow mobile-style layout if the window is small, and a phone with a very sharp panel can still have a 390 CSS-pixel viewport. Screenshot planning has a different concern: raster output usually follows the viewport size multiplied by DPR, so the same layout width can create very different image dimensions on a standard desktop display and a high-density phone.

Common resolution terms and why each one matters
Term	What it answers	Common mistake
Screen CSS pixels	The display coordinate space reported by the browser.	Treating it as the exact screenshot size.
Viewport CSS pixels	The layout area currently available inside the browser window.	Using monitor size when a layout bug depends on window size.
Device-pixel ratio	The scale from CSS pixels to physical device pixels.	Assuming 1 CSS pixel always equals 1 hardware pixel.
Breakpoint	The width where responsive CSS rules start or stop applying.	Testing only one width near a layout change.

Diagram showing screen CSS pixels, browser viewport width, display diagonal, device-pixel ratio, and responsive breakpoint lane. — Resolution notes are most useful when they separate the screen, the viewport, DPR, breakpoint width, and optional physical diagonal.

Physical size adds one more distinction. A 13-inch laptop and a 27-inch monitor can report similar CSS-pixel widths after scaling, but their pixels sit at very different densities. Pixels per inch, or PPI, is only an estimate unless the real display diagonal is known. That estimate is still useful when deciding whether a screenshot is dense enough for documentation, whether a remote desktop is scaled oddly, or whether a bug report came from a narrow window rather than a low-resolution display.

How to Use This Tool:

Use the checker in the same browser, display, zoom level, and window size you want to document. The readings update from the current browser environment.

Start with the summary: read the current display size, viewport size, viewport lane, DPR, width share, and density badge.
Choose the Breakpoint guide that matches the review context: Common device widths, Bootstrap 5 grid, or Tailwind default.
Open Advanced and enter the Display diagonal only when you need estimated PPI or physical width and height. Leave it blank for layout-only checks.
Use Display Metrics for exact screen, available-screen, viewport, DPR, color depth, orientation, aspect ratio, and density values.
Use Breakpoint Audit and Viewport Fit Bars to see the current lane, the next breakpoint gap, and whether the full screen could reach a wider lane.
Check Density Signals and Capture Targets when planning screenshots, UI review decks, annotated mockups, or full-screen captures.
If a warning appears, fix the setup before recording evidence. Recheck zoom and display scaling for fractional DPR, widen the window for large viewport gaps, or correct the diagonal value and unit when the PPI warning looks unrealistic.

Interpreting Results:

Use Viewport size (CSS px) for layout and breakpoint questions. A bug report that only says "1920 x 1080" may still be missing the decisive number if the browser viewport was 1210 pixels wide inside a snapped or partially hidden window.

Use Screen resolution (CSS px) and Available screen (CSS px) to explain display context. Available size can be smaller than screen size when operating-system interface areas reduce the space a normal window can occupy.

DPR changes capture planning more than layout width. A 390 x 844 viewport at DPR 3 produces a 1170 x 2532 native-pixel capture, while the responsive breakpoint comparison still uses 390 CSS pixels. Fractional DPR is a warning sign for browser zoom or operating-system scaling, so compare repeat tests only after those settings match.

Breakpoint labels are evidence, not proof that every layout state has been tested. Check widths just below and just above the next breakpoint when wrapping, overflow, hidden controls, or chart clipping happens near a threshold.

PPI and physical-size estimates depend entirely on the Display diagonal value. If the diagonal is entered as centimeters instead of inches, or if a TV, projector, virtual machine, or remote desktop reports unusual screen values, the density result can look precise while describing the wrong physical setup.

Technical Details:

Browser layout uses CSS pixels. Screen width, available width, and viewport width are all reported in that coordinate system, while hardware pixels are reached by applying DPR. That distinction is why a high-density device can have a small CSS viewport and a large native capture at the same time.

The viewport reading comes from the interior layout viewport, including scrollbars when the browser exposes them that way. Screen width describes the display coordinate space, and available screen width describes the horizontal space available to windows after reserved operating-system areas are considered. Those browser-provided values are useful diagnostics, but they can vary across browsers, zoom modes, multiple displays, remote sessions, and privacy-oriented browser settings.

Formula Core

Native-pixel capture dimensions are CSS-pixel dimensions multiplied by DPR, then rounded to whole pixels:

viewportNativeWidth = viewportCssWidth \times DPR

viewportNativeHeight = viewportCssHeight \times DPR

Viewport share compares the browser window against the reported screen in CSS pixels:

widthShare = \frac{viewportCssWidth}{screenCssWidth}

areaShare = \frac{viewportCssWidth \times viewportCssHeight}{screenCssWidth \times screenCssHeight}

When a physical diagonal is supplied, density is estimated from the native-pixel screen diagonal divided by the diagonal in inches:

PPI = \frac{\sqrt{{screenNativeWidth}^{2} + {screenNativeHeight}^{2}}}{diagonalInches}

A centimeter input is converted with inches = centimeters / 2.54. PPI is shown to one decimal place, while estimated physical width and height are shown to two decimal places in inches and one decimal place in centimeters. Aspect ratio is simplified with the greatest common divisor of the reported screen dimensions, with viewport dimensions used only if screen dimensions are unavailable.

Key measured and derived fields
Field	Unit	Meaning
Screen resolution (CSS px)	Width x height	Browser-reported display coordinate space.
Available screen (CSS px)	Width x height	Screen space available to normal windows after reserved interface areas.
Viewport size (CSS px)	Width x height	Current browser layout area used for responsive CSS decisions.
Viewport at device pixels	Width x height	Estimated raster capture size for the visible page at native density.
Screen-to-viewport width delta	Pixels	How much narrower or wider the viewport is than the reported screen width.
Estimated density	PPI	Native-pixel diagonal divided by the supplied physical diagonal.

Breakpoint Rules

The current lane is the highest breakpoint whose minimum width is less than or equal to the current viewport width. The screen lane uses the same rule against the reported screen width.

Breakpoint guide thresholds
Guide	Thresholds	Use
Common device widths	320, 375, 390, 414, 768, 1024, 1280, 1440 px	Phone, tablet, laptop, and desktop QA notes.
Bootstrap 5 grid	xs 0, sm 576, md 768, lg 992, xl 1200, xxl 1400 px	Projects that use Bootstrap's default grid tiers.
Tailwind default	base 0, sm 640, md 768, lg 1024, xl 1280, 2xl 1536 px	Projects that use Tailwind's default responsive prefixes.

Signals and Warning Bounds

Resolution warning and density thresholds
Condition	Threshold	Meaning
Window constrained	Viewport at least 160 px narrower than screen	The browser window is meaningfully narrower than the display.
Large viewport gap warning	Viewport at least 240 px narrower than screen	Split view, snapped layout, or browser chrome is likely driving the breakpoint.
Viewport wider than screen warning	Viewport more than 2 px wider than screen	Zoom, scaling, or multi-display reporting may be affecting the numbers.
Fractional DPR warning	DPR is not a whole number	Browser zoom or operating-system scaling may be active.
Diagonal warning	Less than 2 in or greater than 120 in	The physical display size is probably entered with the wrong value or unit.
PPI warning	Less than 50 ppi or greater than 1000 ppi	The diagonal or scaling assumptions are unlikely for a normal display.
Physical density band	<140, 140-219.9, or >=220 ppi	Coarse, balanced, or high estimated physical density when diagonal is supplied.
DPR-only density class	<2, 2-2.99, or >=3 DPR	Standard, Retina-class, or high-DPR class when no diagonal is supplied.

Worked Examples:

Responsive bug on a desktop monitor

A tester reports a 1920 x 1080 screen, but the browser viewport is 1366 x 768 at DPR 1. With the Bootstrap 5 grid guide, Viewport lane is Bootstrap xl, Next breakpoint is Bootstrap xxl at 1400 px, and Constraint signal is Window constrained. The useful follow-up is to widen the browser by about 34 px, then test just above and below 1400 px before blaming the monitor resolution.

High-density phone screenshot

A phone viewport reads 390 x 844 CSS px with DPR 3. The Common device widths guide places it in the 390 px modern phone lane, but Viewport at device pixels becomes 1170 x 2532. Capture Targets will point to a 3x recommended export, so a screenshot can be large and sharp even though responsive CSS still sees a narrow mobile width.

Wrong diagonal unit

A 2560 x 1440 display at DPR 1.5 produces an extreme PPI warning when the Display diagonal is entered as 1 cm by mistake. Correcting the value to 27 in changes Estimated density to a balanced physical-density result near 163 ppi, and the physical width and height become usable for screenshot-density notes.

FAQ:

Why is my viewport smaller than my screen resolution?

The viewport is the browser's current layout area, not the whole monitor. Window size, scrollbars, browser chrome, split view, and snapped layouts can make Viewport size (CSS px) much smaller than Screen resolution (CSS px).

Why does DPR change when I zoom?

Browser zoom and operating-system display scaling can change how CSS pixels map to device pixels. A fractional Device pixel ratio warning means repeat screenshots and breakpoint tests should use the same zoom and scaling settings.

Which breakpoint guide should I choose?

Choose the guide used by the project you are testing. Use Bootstrap 5 grid for Bootstrap layouts, Tailwind default for Tailwind projects, and Common device widths when you need familiar phone, tablet, laptop, and desktop lanes.

Why is estimated PPI missing?

PPI requires a real physical display diagonal. Add the Display diagonal in Advanced, choose inches or centimeters correctly, and recheck any warning about very small, very large, unusually low, or unusually high values.

Can the result identify my exact monitor model?

No. The checker reads browser-exposed dimensions, DPR, color depth, orientation, and optional diagonal input. It can describe the current display context, but it does not identify a monitor model or verify panel specifications.

Glossary:

CSS pixel: A layout unit used by browsers for viewport measurements, media queries, and responsive breakpoints.
Device-pixel ratio: The ratio between physical device pixels and CSS pixels for the current display context.
Viewport: The browser's current layout area available to the page.
Available screen: The portion of the screen coordinate space that normal browser windows can use after reserved interface areas.
Breakpoint: A minimum width where responsive layout rules begin to apply.
PPI: Pixels per inch, estimated from native-pixel screen diagonal and the supplied physical diagonal.

References:

Window: devicePixelRatio property, MDN Web Docs, Dec 17, 2025.
Window: innerWidth property, MDN Web Docs, Sep 19, 2023.
Screen: width property, MDN Web Docs, Sep 15, 2025.
Screen: availWidth property, MDN Web Docs, Sep 15, 2025.
Breakpoints, Bootstrap documentation.
Responsive design, Tailwind CSS documentation.