AnyTool
Your files never leave your device. All processing happens locally in your browser.

How do I check my screen resolution and viewport size in the browser?

Open AnyTool Screen Resolution Detector and it reads your display instantly — no clicks needed. Three big readouts separate the numbers people confuse: your viewport (the browser window, e.g. 1536 × 754 CSS pixels — the canvas your CSS media queries actually target), your screen resolution (the logical screen, e.g. 1920 × 1080 CSS pixels after OS scaling) and your device pixel ratio (the multiplier from CSS pixels to physical pixels, like 1× or 2×). From those it estimates your native/physical resolution as screen × DPR and labels it Full HD, 1440p, 4K and so on, plus a gcd-reduced aspect ratio. It also measures your refresh rate by timing requestAnimationFrame frames, and shows available screen area, color depth and gamut, orientation, touch points, scrollbar width, browser-chrome and taskbar heights, and your dark-mode / reduced-motion preferences. Everything re-reads live as you resize, rotate or zoom, and a Copy summary button gives you a clean read-out for bug reports — all detected in your browser, with nothing uploaded.

  • Viewport, screen resolution and device pixel ratio shown as three clear readouts (all in CSS pixels)
  • Native/physical resolution estimated as screen × DPR, with a Full HD / 1440p / 4K class label
  • Refresh rate measured locally by averaging requestAnimationFrame deltas (≈60 / 120 / 144 Hz)
  • Color depth & gamut (sRGB / DCI-P3 / Rec. 2020), aspect ratio, orientation, touch, scrollbar & chrome sizes
  • 100% client-side — your screen info is never uploaded, logged or stored; values update live on resize/zoom

What is

Screen Resolution Detector

A screen resolution detector reports the dimensions and characteristics of your display and browser window. A browser-based detector reads window.screen, window and matchMedia to show the logical screen resolution and viewport size in CSS pixels, the device pixel ratio that maps CSS pixels to physical pixels, an estimated native resolution (screen × DPR), the aspect ratio, color depth and gamut, orientation, touch support and motion/colour-scheme preferences. Refresh rate, which browsers cannot always read directly, is estimated by measuring the time between animation frames. All values are read in your browser and update live as the window resizes, the device rotates or the page zooms.

Generators

Related terms

Screen resolutionViewportDevice pixel ratio (DPR)CSS pixelNative resolutionAspect ratioRefresh rate (Hz)Color depthColor gamutrequestAnimationFrame

Frequently Asked Questions

No. Every value is read entirely in your browser from the window.screen, window and matchMedia APIs, and the refresh rate is measured locally with requestAnimationFrame. Nothing is uploaded, logged or stored.

The detector runs 100% client-side. It reads standard browser properties — window.screen (width, height, available area, colour depth, orientation), window (innerWidth/Height, outerWidth/Height, devicePixelRatio) and matchMedia (colour gamut, dark mode, reduced motion, orientation) — and measures the refresh rate by timing animation frames with requestAnimationFrame. There is no server and no account, so your screen details are never transmitted, logged or stored; we never see them. The Copy summary button simply places the read-out text on your own clipboard for pasting into a bug report or message.

Screen resolution is your whole logical screen in CSS pixels; the viewport is just the browser window content area (what your CSS media queries target); the device pixel ratio (DPR) is how many physical pixels make up one CSS pixel.

Screen resolution (window.screen.width × height) is the size of your entire screen in CSS pixels, after any OS display scaling. The viewport (window.innerWidth × innerHeight) is just the page canvas inside the browser window — smaller than the screen because it excludes browser toolbars, the OS taskbar and any scrollbar, and it is the value a CSS rule like @media (max-width: 768px) actually responds to. The device pixel ratio (window.devicePixelRatio) is the multiplier between the two pixel systems: on a standard monitor it is 1, meaning one CSS pixel equals one physical pixel, while on a Retina or hi-DPI phone it is 2, 2.625 or 3. The relationship is roughly: physical pixels = CSS pixels × DPR, which is exactly how this tool estimates your native resolution.

It measures it by averaging the time between animation frames over about a second, then snaps the result to the nearest common rate like 60, 120 or 144 Hz. It is approximate, not an exact hardware read-out.

Browsers cannot reliably report refresh rate directly in every engine, so the tool estimates it: a requestAnimationFrame loop, which the browser fires in step with the display, records the gap between frames for about a second, takes the median delta to ignore the odd hitch, converts it to a frequency (1000 ÷ ms) and snaps it toward the nearest common rate (24/30/60/75/90/120/144/165/240 Hz) when it is close. Because it relies on timing, the figure is approximate: variable-refresh displays (FreeSync / G-SYNC), a busy CPU, a backgrounded tab, or the browser capping frames can all skew it. Press Re-measure for a fresh reading, ideally with the tab focused and not much else running.

Browsers report CSS pixels, which are affected by browser zoom and OS display scaling (125% / 150% / 200%). The native resolution shown is an estimate of CSS pixels × device pixel ratio, so fractional scaling can make it differ from the panel’s true pixels.

Every size here is in CSS pixels, not raw hardware pixels. If your operating system uses display scaling — common at 125%, 150% or 200% on hi-DPI screens — or if you have zoomed the page with Ctrl/Cmd +/−, the reported screen resolution and viewport will read smaller than the numbers in your display settings. The tool estimates the native/physical resolution as screen × devicePixelRatio, which recovers the panel’s pixel count on simple integer scaling, but with fractional scaling the estimate can be off by a little. That is why the values update live as you change zoom, and why the native figure is labelled an estimate rather than an exact hardware read-out.

Detailed Explanation

Methodology

How the Screen Resolution Detector Reads Your Display

AnyTool Screen Resolution Detector runs entirely on standard browser APIs — window.screen, window and matchMedia — with no library, CDN, upload or server. It separates the three numbers people confuse: the viewport (window.innerWidth × innerHeight, the page canvas your CSS media queries actually target), the screen resolution (window.screen.width × height, the logical screen in CSS pixels after OS display scaling) and the device pixel ratio (window.devicePixelRatio, the multiplier from CSS pixels to physical pixels). From those it estimates the native/physical resolution as screen × DPR and labels it Full HD, 1440p or 4K, and reduces the aspect ratio with a gcd so 1920 × 1080 reads 16:9. Refresh rate — which browsers do not expose directly — is measured locally by averaging requestAnimationFrame deltas over about a second to approximate 60, 120 or 144 Hz. Every value re-reads live on resize, orientationchange and zoom, and listeners plus the rAF loop are torn down on unmount.

  • Reads window.screen, window and matchMedia — no upload, no server
  • Separates viewport, screen resolution and DPR (all in CSS pixels)
  • Native resolution estimated as screen × DPR with a Full HD / 1440p / 4K label
  • Refresh rate measured by averaging requestAnimationFrame deltas (~60/120/144 Hz)
  • Live updates on resize / orientationchange / zoom; listeners cleaned up on unmount
How It Works

Every Metric It Surfaces

Beyond the three primary readouts, the tool shows a grid of detail cards: available screen area (screen.availWidth × availHeight, excluding the OS taskbar), color depth (screen.colorDepth) and color gamut via matchMedia (sRGB, DCI-P3, Rec. 2020), the gcd-reduced aspect ratio, orientation (portrait / landscape from screen.orientation), the measured refresh rate, touch support (maxTouchPoints / ontouchstart), the scrollbar width, and your dark-mode and reduced-motion preferences read with prefers-color-scheme and prefers-reduced-motion. A Copy summary button assembles a clean plain-text read-out of every value so you can paste it straight into a bug report or support message. Because everything updates live, dragging the window between a Retina laptop screen and an external 1080p monitor, rotating a phone, or pressing Ctrl/Cmd +/− to zoom all change the numbers in real time — which makes the DPR and CSS-pixel relationship easy to see.

  • Detail cards: available area, color depth & gamut, aspect ratio, orientation, touch
  • Refresh rate, scrollbar width, dark-mode and reduced-motion preferences
  • Copy summary builds a paste-ready plain-text read-out for bug reports
  • Numbers change live when you move windows between displays, rotate or zoom
  • Aspect ratio gcd-reduced (1920 × 1080 → 16:9); resolution class auto-labelled
Limitations

Privacy and Honest Limits

Because every value is read in your browser from window.screen, window and matchMedia, your display information is never transmitted, logged or stored — there is no server and no account, and the Copy summary button only places text on your own clipboard. Honestly, the numbers are CSS pixels and are affected by browser zoom and OS display scaling: at 150% Windows scaling a 3840 × 2160 panel reports roughly 2560 × 1440 CSS pixels, so the native resolution shown here is an estimate of screen × DPR and can differ from the panel’s true hardware pixels. Refresh rate is measured rather than reported — it averages animation-frame timing, so a busy tab, a capped browser or a variable-refresh display can pull the figure a few hertz off the panel’s rating. devicePixelRatio itself changes with zoom, and some browsers round it. These are characteristics of the web platform, not bugs in the tool; for the panel’s exact factory pixels and certified refresh rate, check the manufacturer’s specifications or your OS display settings.

Screen Resolution Detector: in-browser (AnyTool) vs typical online checkers
CapabilityAnyToolTypical online checkers
Viewport vs screen vs DPRThree clearly separated readoutsOften one number, conflated
Native resolutionEstimated as screen × DPR, class-labelledSometimes none
Refresh rateMeasured locally via requestAnimationFrameUsually not shown
Color depth & gamutcolorDepth + matchMedia gamutRarely shown
Live updatesRe-reads on resize / rotate / zoomOften static snapshot
Copy summaryPaste-ready read-out for bug reportsVaries
PrivacyRead in-browser, never uploadedUsually local, varies

AnyTool reads window.screen, window and matchMedia entirely in your browser; values are CSS pixels affected by zoom and OS scaling, and refresh rate is measured and approximate.