What Is My Screen Resolution

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 reported resolution such as 1920 x 1080 is only one view of a display. It says how wide and tall the browser thinks the screen is in CSS pixels, but it does not say how much space the page actually has, how dense the panel is, or how large a screenshot will be.

Web layout, support notes, screenshots, and device comparisons all use slightly different resolution vocabulary. The screen is the display coordinate space exposed to the browser. The viewport is the inside of the current browser window where the page is laid out. Device-pixel ratio, usually shortened to DPR, is the scale between CSS pixels and the physical pixels used to draw them.

Those numbers can shift without changing the hardware. Browser zoom can change DPR, operating-system display scaling can make the CSS-pixel grid smaller or larger, and a snapped or split window can put a desktop monitor into a mobile-width layout. A high-density phone may have far more hardware pixels than its viewport width suggests, while a remote desktop can report a neat resolution that hides scaling or host-window constraints.

Common display measurement terms and the mistakes they prevent
Measurement	What it tells you	Why it can mislead
Screen CSS pixels	The browser-reported display coordinate space.	It is not always the available page area, especially with docked interface areas or multiple displays.
Viewport CSS pixels	The width and height used by responsive CSS at that moment.	A wide monitor can still create a narrow viewport when the window is constrained.
Device-pixel ratio	The scale from CSS pixels to native device pixels.	Layout still follows CSS pixels, while raster captures follow CSS pixels multiplied by DPR.
Physical density	An estimated pixels-per-inch value when the real diagonal is known.	A wrong diagonal or unit makes the estimate look exact while describing the wrong display.

Diagram separating screen CSS pixels, browser viewport, display diagonal, DPR, and responsive lanes. — Resolution notes become more useful when layout width, native capture size, and optional physical density are kept separate.

The practical result is that a good support note should record more than the monitor headline. Viewport width answers the responsive-layout question. DPR answers the capture-size question. Screen and available-screen readings explain the desktop context. Physical density needs a real diagonal, not a guess from the resolution alone.

How to Use This Tool:

Run the checker in the same browser window, display, zoom level, and orientation you want to document. The readings reflect the current browser session and update when the viewport changes.

Read the summary first. It shows the current screen size, viewport size, selected breakpoint guide, viewport lane, DPR, viewport width share, and density badge.
Choose Breakpoint guide for the comparison you need: Common device widths, Bootstrap 5 grid, or Tailwind default.
Open Advanced only when physical density matters. Enter Display diagonal with in or cm; leave it blank for layout-only checks.
Use Display Metrics for the raw and derived numbers, including screen, available screen, viewport, DPR, color depth, orientation, aspect ratio, physical size, and estimated density.
Open Breakpoint Audit when a layout bug depends on width. The current lane, next breakpoint, and media-query starter show what width to test next.
Use Viewport Fit Bars, Density Signals, and Capture Targets when planning screenshots, review decks, UI annotations, or full-screen captures.
If a warning appears, fix the setup before sharing evidence. Check zoom and display scaling for fractional DPR, widen the window for a large viewport gap, or correct the diagonal value when PPI looks unrealistic.

Interpreting Results:

Use Viewport size (CSS px) for responsive layout questions. A report that only says 1920 x 1080 can miss the important fact that the page was actually running in a 1210 px-wide window.

Screen resolution (CSS px) and Available screen (CSS px) explain the display context. Available size may be smaller when operating-system interface areas reserve space that a normal window cannot use.

Breakpoint labels are clues. They show which lane the current viewport satisfies, but they do not prove that nearby widths have been tested.
DPR changes raster size. A 390 x 844 CSS-pixel viewport at DPR 3 becomes a 1170 x 2532 native-pixel capture, while the responsive breakpoint still reads 390 px.
Fractional DPR needs care. Browser zoom or display scaling can make repeat tests disagree unless both testers match the same zoom and scaling context.
PPI depends on the diagonal. The density estimate is useful only when the display diagonal and unit match the real device.

Technical Details:

CSS pixels are the coordinate system used by layout and media queries. Hardware pixels are the physical samples on the display. DPR links the two, so a high-density device can report a modest viewport width while still producing a large native-pixel screenshot.

The viewport value comes from the browser's layout viewport. Screen width and available width come from the display information exposed to the browser, with available width reduced when the operating system reports reserved space. Those readings are diagnostic measurements, not hardware certificates, and they can vary across browsers, display scaling modes, remote sessions, and privacy settings.

Formula Core:

Native capture dimensions multiply CSS-pixel dimensions by DPR and round to whole pixels:

nativeWidth = viewportCssWidth \times DPR

nativeHeight = viewportCssHeight \times DPR

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

widthShare = \frac{viewportCssWidth}{screenCssWidth}

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

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

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

A centimeter diagonal is converted with centimeters divided by 2.54. PPI is rounded to one decimal place. Estimated physical width and height are rounded to two decimals in inches and one decimal in centimeters. Aspect ratio is simplified from the reported screen dimensions, with viewport dimensions used only when screen dimensions are unavailable.

Breakpoint guide thresholds used by the resolution checker
Guide	Thresholds	Best 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 using Bootstrap's default grid tiers.
Tailwind default	base 0, sm 640, md 768, lg 1024, xl 1280, 2xl 1536 px	Projects using Tailwind's default responsive prefixes.

Signals and Bounds:

Warning and density thresholds used in display interpretation
Signal	Threshold	Meaning
Window constrained	Viewport at least 160 px narrower than screen	The window width is meaningfully smaller than the display width.
Large viewport gap warning	Viewport at least 240 px narrower than screen	Window chrome, split view, or snapped layout is probably driving the active breakpoint.
Operating-system reserved width	Screen width more than 24 px above available width	Interface areas reduce the space a normal window can occupy.
Physical density bands	Coarse below 140 PPI, balanced from 140, high from 220	The band appears only when a display diagonal is supplied.
Recommended export scale	1x below DPR 1.5, 2x from 1.5, 3x from 2.5	The scale is a practical raster default for captures and review artifacts.
Diagonal sanity	Below 2 in, above 120 in, PPI below 50, or PPI above 1000	The physical input or display reporting probably needs review.

Accuracy Notes:

The readings are browser-exposed measurements from the current window. They are excellent for reproducing web-layout conditions, but they can differ from monitor spec sheets, graphics-driver settings, remote-desktop host settings, or screenshots captured by another application.

Resize, zoom, orientation, and moving a window between displays can change the values.
Available screen size may include operating-system behavior that differs by platform and display arrangement.
The physical density estimate is only as good as the supplied diagonal and the browser's reported native-pixel scale.

Advanced Tips:

For layout bugs, record Viewport size (CSS px), Device pixel ratio, and the chosen Breakpoint guide rather than only the screen headline.
Use Screen-to-viewport width delta to spot test evidence taken from a partial-width browser window.
Use the media-query starter from Breakpoint Audit as a note, then test just below and above the next breakpoint before closing a responsive issue.
For screenshots, compare Viewport at device pixels with Recommended export at 1x, 2x, or 3x before creating review images.
When comparing two testers, make the browser zoom, operating-system scaling, and active display match before treating a DPR difference as a device difference.

Worked Examples:

Responsive bug on a large monitor

A tester reports a 2560 x 1440 display, but Viewport size (CSS px) reads 1008 x 920 and Constraint signal says the window is constrained. The layout should be debugged near the 1024 px breakpoint, not as a full-width desktop issue.

High-density screenshot capture

A phone-like viewport reads 390 x 844 at DPR 3. Viewport at device pixels becomes 1170 x 2532, and Capture Targets shows the native capture size. Use the CSS viewport for layout notes and the native-pixel size for image export planning.

Unrealistic density warning

A 27-inch monitor entered as 27 cm produces an unusually high PPI warning. Change Display diagonal to 27 in or enter the correct centimeter value before trusting estimated physical width, height, or density.

FAQ:

Why is my viewport smaller than my screen resolution?

The viewport is the page area inside the browser window. Tabs, browser chrome, sidebars, snapped windows, split view, and operating-system reserved areas can make it much smaller than the screen.

Should I use screen size or viewport size for CSS breakpoints?

Use viewport size. The Breakpoint Audit compares the selected breakpoint guide against the current viewport width because media queries respond to available layout width, not the monitor headline.

Why does DPR change when I zoom?

Browser zoom changes the CSS-pixel scale, so DPR can become fractional or move to a different value. Match zoom and display scaling before comparing two sessions.

Why does PPI show as not provided?

PPI needs a real physical diagonal. Open Advanced and enter the display diagonal in inches or centimeters if you need estimated density and physical size.

Why did the checker warn about my diagonal?

The warning appears when the diagonal is below 2 inches, above 120 inches, or leads to very low or very high PPI. Recheck the value and unit before using the physical estimate.

Glossary:

CSS pixel: A layout unit used by browsers for sizing, positioning, and media-query decisions.
Viewport: The browser window area available to the page layout.
Device-pixel ratio: The ratio between native device pixels and CSS pixels for the current display context.
Breakpoint: A minimum width where a responsive layout rule starts applying.
PPI: Pixels per inch, estimated here from native screen pixels and the supplied display diagonal.
Available screen: The screen area the browser reports as available after reserved operating-system interface areas.

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.
How to change screen resolution in macOS, Simplified Guide.
How to change screen resolution on iPhone and iPad, Simplified Guide.