ScreenMotion Lab
Resolution & DPR Test
Tools

What Is My Screen Resolution?

Generic phone with a color-gradient screen test patternPhoneGeneric tablet with a color-gradient screen test patternTabletGeneric laptop with a color-gradient screen test patternLaptopGeneric monitor with a color-gradient screen test patternMonitorGeneric ultrawide with a color-gradient screen test patternUltrawideGeneric tv with a color-gradient screen test patternTV

Use this page to answer “what is my screen resolution?” and compare browser-reported screen size with the current viewport. Confirm native display resolution and scaling in system settings; browser dimensions are not a physical size measurement.

Detected display stats (estimated)

Screen resolution
—
Viewport size
—
Device pixel ratio
—
DPR-scaled resolution (estimate)
—
Color depth
—
Orientation
—
Closest standard reference
—

Reference resolution bars

The pixel grid below has fine lines every 10 CSS px and bold lines every 100 CSS px, so you can visually judge scaling and sharpness. Pick a preset to overlay a frame sized to that resolution.

Select a preset above to overlay a reference frame.

Note: this overlay is a rendered approximation — it is drawn in CSS pixels (target resolution ÷ your device pixel ratio) using your browser's reported DPR. It is not a true native-resolution test and cannot confirm your panel's actual physical pixel count.

Understand your screen resolution and device pixel ratio

This screen resolution checker with device pixel ratio helps explain the space your browser uses to draw a page. Read the screen dimensions, viewport, DPR, estimated scaled dimensions, color depth and orientation together. These values describe the current browser environment. They are especially useful when text looks unexpectedly large, a design fits one monitor differently, or a laptop reports smaller dimensions than the resolution on its specification sheet.

How to use the tool

  1. Move the browser window fully onto the display you want to inspect. With several connected screens, avoid leaving the window across the boundary between them.
  2. Set browser zoom to 100% and note the operating system scaling setting. Record the screen dimensions, viewport dimensions and DPR before changing anything.
  3. Choose a 720p, 1080p, 4K or 8K reference frame. Inspect the grid: fine lines are spaced every 10 CSS pixels and heavier lines every 100 CSS pixels.
  4. Enter fullscreen and compare the viewport again. Exit fullscreen, resize the window, then change only one scaling or zoom setting to see which values move.

Read the numbers as a relationship

Screen dimensions and viewport dimensions answer different questions. The viewport is the webpage’s available layout area; browser chrome and a window that is not maximized reduce it. Orientation indicates the browser’s reported screen orientation, so a portrait monitor or a rotated phone can change the arrangement without changing its physical pixel count.

For example, browser-reported dimensions of 1920 × 1080 and DPR 2 produce an estimated 3840 × 2160 after multiplication. That is useful scaling arithmetic, but it is not a second, independent measurement of the panel. Compare it with the selected output resolution in display settings and the manufacturer’s native-resolution specification.

The closest standard reference is a convenience label. A nonstandard ultrawide or portrait display may have no exact preset match. Color depth is also a reported value; it cannot confirm the effective bit depth of every stage between the application and the panel.

Why the overlay may look clipped or soft

The reference frame divides its target dimensions by reported DPR to choose a CSS size. A large preset can be constrained by the available panel area. Clipping therefore means the reference does not fit this webpage’s current drawing area, rather than proving that your monitor cannot accept that signal.

If fine lines look uneven, first reset zoom and compare the operating system scaling. Fractional scaling can distribute CSS edges over device pixels. Fullscreen removes browser chrome, but it does not automatically select the monitor’s native mode or bypass the system compositor.

Separate native resolution, logical workspace and scaling

Native resolution is the panel’s physical pixel grid; the selected signal resolution and the browser’s logical workspace are different quantities. Start with the display’s documented native resolution, then compare it with the resolution selected in system display settings. Return browser zoom to 100% before comparing this page’s screen dimensions, viewport and DPR. If the selected signal matches the panel specification but the browser reports a smaller workspace, inspect system scaling before lowering the output resolution: larger text does not by itself mean that physical pixels have disappeared. If only this browser tab looks enlarged, check page zoom first. DPR describes the current relationship between device pixels and CSS pixels, and desktop page zoom can change that relationship. Multiplying reported screen dimensions by DPR is an estimate, not proof of the panel’s native pixel count or the incoming signal. Change one setting at a time and compare the same reference frame again. Use the result to choose a readable workspace, rather than treating the largest preset as a pass/fail target. If you also want to investigate motion, that is a separate check with the browser cadence tool.

Frequently asked questions

Does this detect my monitor’s native resolution?

It reports browser screen and scaling values. Confirm native physical resolution using the monitor’s specifications; confirm the currently selected signal resolution in system display settings.

Why does my 4K display report 1920 × 1080?

Scaling can expose a smaller logical workspace. Check DPR and system scaling together before assuming that the display is receiving a lower-resolution signal.

Does browser zoom change device pixel ratio?

Page zoom can change DPR and the viewport while the physical panel stays the same. Use 100% zoom for a repeatable comparison; phone pinch zoom behaves differently from desktop page zoom.

Why is the viewport smaller than the screen?

The browser window, tabs, address bar and other interface areas occupy space. Fullscreen generally gives the page more room, although device and browser behavior can differ.

Can an 8K overlay prove that my screen is 8K?

No. It is a reference drawing sized through CSS and DPR. A browser can draw or scale that reference on a display with a different physical resolution.

References: MDN: devicePixelRatio · Windows refresh settings · Mac refresh settings.

Last updated: