Skip to content
ToolQivo

Screen Resolution Checker

Your screen size, viewport, pixel ratio and which breakpoint is active.

Developer Tools Reviews Free · no sign-up

Everything below is read from your browser as the page renders. Nothing is sent anywhere — resize the window and the viewport figures follow.

Quick Tool Overview

The Screen Resolution Checker separates the screen from the viewport — the number your media queries actually compare against — and shows the device pixel ratio between them, which is why a 2560-pixel display reports a 1280-pixel viewport.

What it does
Reports your display and viewport measurements
You give it
Nothing — it reads the browser
You get back
Screen, viewport, pixel ratio and breakpoint
Best for
Responsive testing and bug reports
Developer Tools Free, unlimited use No sign-up Runs in your browser

About the Screen Resolution Checker

Everything your browser knows about the display it is drawing on: the screen resolution, the viewport size, the device pixel ratio, the colour depth, the orientation and which CSS breakpoint is active right now. It updates as you resize the window.

The distinction that matters for CSS is between the screen and the viewport. Your screen might be 2560 pixels wide while the viewport your media queries see is 1280, because the device pixel ratio is 2 — the display packs four physical pixels into each CSS pixel. That is why a retina screenshot is twice the size of the layout it shows, why an image needs a 2× variant to look sharp, and why testing a breakpoint by reading the screen resolution gives the wrong answer. Nothing here is sent anywhere; it is read from the browser and displayed.

Key features of the Screen Resolution Checker

Screen and viewport apart

The distinction that matters for CSS, and the reason reading a screen resolution to test a breakpoint gives the wrong answer.

Live on resize

Drag the window and the viewport figures and the active breakpoint update as you go.

Breakpoints listed

Tailwind and Bootstrap breakpoints together, with the one currently active marked.

Pixel ratio explained

Why a retina screenshot is twice the size of the layout it shows, and when a 2× image is needed.

Nothing transmitted

Read from your browser and rendered here. No logging, no storage, no request.

How to use the Screen Resolution Checker

  1. 1

    Open the page

    Everything is read straight away, with no permission prompt.

  2. 2

    Resize the window

    The viewport figures and the active breakpoint update live.

  3. 3

    Check the pixel ratio

    It is the factor between CSS pixels and physical ones.

  4. 4

    Compare the breakpoints

    Every common framework breakpoint is listed, with the active one marked.

Frequently asked questions

Three things take space: the browser window is usually not full screen, the window has chrome around the page, and a high-density display divides the physical resolution by the pixel ratio before CSS ever sees it.

Reviews of the Screen Resolution Checker

What people who use the Screen Resolution Checker think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the Screen Resolution Checker. It takes half a minute and no account.

Write the first review

More developer tools