Skip to content
Betterbit Tools

What Is My Screen Resolution?

See the browser’s screen, viewport, DPR, and zoom readings side by side—without confusing CSS pixels with a panel’s native resolution.

  • Fewer clicks, keyboard friendly
  • Features others lock behind paywalls
  • More accurate results

Your browser display report

Updates when this window, orientation, or visual viewport changes.

R to refresh
Unavailable
Screen (browser-reported CSS px)
Unavailable
Layout viewport (CSS px)
Unavailable
Visual viewport (CSS px)
Unavailable
Available screen (CSS px)
Unavailable
Device pixel ratio (DPR)
Unavailable
Visual viewport scale
Unavailable
Aspect ratio
Unavailable
Color depth
Unavailable
Active CSS breakpoint

These are browser-exposed values, not a guaranteed panel-native resolution or physical screen size. Scaling, page zoom, remote desktops, and browser privacy settings can change what a page receives.

How to use

  1. Open this page to read the current browser-reported screen and viewport values.
  2. Resize the browser window, rotate a device, or pinch-zoom to watch the relevant readings update.
  3. Use the layout viewport and active CSS breakpoint when reproducing a responsive-layout issue.
  4. Select Copy report and CSS query to paste the values and current media-query range into a bug report or test note.

Screen, layout viewport, and visual viewport are different rectangles

A browser exposes more than one size. Screen width and height describe the screen area the browser exposes; available screen removes space reserved by the operating system where that information is available. The layout viewport is the coordinate area used to lay out a page, so CSS width media queries respond to it—not to the monitor’s advertised pixel count. The visual viewport is the part of that layout currently visible. On a phone or when magnified, it can be smaller than the layout viewport. Current Chrome, Safari, and Firefox expose the Visual Viewport API; if another browser omits it, this tool shows those readings as unavailable instead of substituting layout values. CSSOM View defines these API dimensions in CSS pixels and allows browsers to reduce the screen information they expose for privacy, so this report deliberately labels the source instead of claiming a hardware measurement.

DPR and zoom explain why the same device can show different numbers

Device pixel ratio (DPR) relates device pixels to CSS pixels used for layout. A DPR of 2 commonly lets one 100 × 100 CSS-pixel box use a 200 × 200 device-pixel drawing area, which is why high-density displays can look sharp without doubling every CSS dimension. Page zoom can change DPR, while pinch zoom is represented by the visual viewport scale and can shrink the visible viewport without changing the layout viewport. Moving a window between displays, operating-system scaling, browser zoom, remote-desktop sessions, and anti-fingerprinting protections can all affect a browser reading. Multiplying values is therefore useful for rendering context, but it cannot prove a monitor’s native panel grid.

Use the copied media query for a reproducible responsive test

The breakpoint card uses the common 640, 768, 1024, 1280, and 1536 CSS-pixel thresholds. It reports the current layout viewport range and copies a bounded query such as @media (min-width: 1024px) and (max-width: 1279.98px). That range is more useful for a web-layout report than saying only “1920 × 1080”, because browser chrome, split-screen mode, and sidebars can make the layout viewport much narrower than the exposed screen. The query is a starting point for reproducing the same width range; a real component may also depend on height, container queries, font loading, or browser-specific behavior.

Frequently asked questions

Why does this screen-resolution checker show a smaller value than my monitor specification?

Browser screen APIs usually report CSS-pixel dimensions, which can be lower than a monitor’s physical panel grid when operating-system scaling or high-DPI rendering is active. Compare the DPR, browser zoom, and operating-system display setting before assuming the monitor is using the wrong resolution.

What is the difference between screen resolution and viewport size?

Screen resolution here is the CSS-pixel screen area exposed to the browser, while the layout viewport is the CSS-pixel area used by the current browser window to lay out the page. CSS width media queries use the layout viewport, which can be much smaller than the screen in a non-maximized or split window.

What does a device pixel ratio of 2 mean?

A device pixel ratio of 2 means the browser maps one CSS pixel to roughly 2 × 2 device pixels for drawing, or about 4 device pixels by area. It improves rendering detail but does not alone identify the display’s native resolution because zoom and operating-system scaling can change the relationship.

Can a website determine my monitor size in inches or its native resolution?

A normal webpage cannot reliably determine a monitor’s physical diagonal in inches or prove its native panel resolution. Browser APIs report web-exposed CSS-pixel values that can be altered by scaling, zoom, remote-desktop software, and privacy protections; use the monitor specification or operating-system display settings for hardware confirmation.

Why is the visual viewport smaller than the layout viewport?

The visual viewport is the portion of the laid-out page currently visible. Pinch zoom, on-screen browser controls, and mobile keyboard or magnification behavior can make it smaller than the layout viewport even when the page layout itself still uses the larger CSS-pixel width.

Related tools

Updated 2026-10-26