Developer Tools

Viewport Size Tester

See your viewport size, screen resolution, device pixel ratio, breakpoint, and color scheme live in your browser. No signup, no upload.

Live viewport

Resize this window, rotate the device, or zoom and every number below updates instantly.

Viewport width

0 px

window.innerWidth

Viewport height

0 px

window.innerHeight

Aspect ratio

n/a

Width to height

Device pixel ratio

1.00

window.devicePixelRatio

Responsive ruler0px to 2,000px

Current breakpoint

Which named breakpoint your viewport width is in for each major design system.

Tailwind CSS

base

< 640px

Bootstrap 5

< 576px

Material Design 3

Compact

< 600px

Physical resolution

CSS pixels multiplied by the device pixel ratio. This is the actual pixel grid the GPU is rasterizing onto.

Physical width

0 px

innerWidth x DPR

Physical height

0 px

innerHeight x DPR

Document width

0 px

documentElement.clientWidth

Document height

0 px

documentElement.clientHeight

Screen

The full monitor or display surface, including any area covered by the operating system shell (dock, taskbar). Browser zoom does not change these numbers.

Screen width

0 px

screen.width

Screen height

0 px

screen.height

Available width

0 px

screen.availWidth

Available height

0 px

screen.availHeight

Color depth

24 bit

screen.colorDepth

Pixel depth

24 bit

screen.pixelDepth

Color gamut

unknown

CSS color-gamut

Max touch points

navigator.maxTouchPoints

Capabilities and preferences

Detected from CSS media queries. These flip when the user toggles their OS dark mode, motion, or contrast settings.

Orientation

unknown

(orientation: ...)

Color scheme

no-preference

prefers-color-scheme

Reduced motion

no-preference

prefers-reduced-motion

High contrast

no-preference

prefers-contrast

Reduced transparency

no-preference

prefers-reduced-transparency

Pointer

unknown

(pointer: ...)

Hover

unknown

(hover: ...)

Online

yes

navigator.onLine

Environment

Browser language

n/a

navigator.language

Timezone

n/a

Intl.DateTimeFormat

Cookies enabled

navigator.cookieEnabled

Media query snippet

A CSS media query that matches your current viewport width. Copy and paste into a stylesheet to target exactly this breakpoint.

/* Tailwind: base */
@media (min-width: 0px) and (max-width: 639px) {
  /* styles for < 640px */
}

/* Current exact viewport */
@media (width: 0px) and (height: 0px) {
  /* triggered only at exactly your current size */
}

/* Match this device pixel ratio */
@media (-webkit-min-device-pixel-ratio: 1.00), (min-resolution: 96dpi) {
  /* high-DPI styles */
}

CSS pixels vs device pixels

window.innerWidth and innerHeight return CSS pixels, the unit your CSS already uses for layout. The browser multiplies them by window.devicePixelRatio to figure out the physical pixel grid the GPU paints. A DPR of 2 means each CSS pixel is a 2 x 2 block of device pixels (a retina display). A DPR of 3 is common on modern phones.

Browser zoom and the resize event

Page zoom (Ctrl + or pinch) changes the CSS-pixel size of the viewport, so the numbers above update when you zoom. System zoom, the Windows display scaling setting, instead changes the device pixel ratio, so DPR will move while innerWidth stays steady. Both are reported by the same resize listener.

How to use

Resize the browser window, rotate your phone, or zoom in or out. Every value below the headline updates instantly with no page reload.
Use the Current Breakpoint card to see the active Tailwind, Bootstrap, or Material Design 3 token for your width.
Open your OS appearance settings and switch dark mode on or off, or toggle the reduced-motion preference, to verify the matching CSS media query updates here.
Copy the auto-generated CSS media query snippet to target this exact breakpoint or device pixel ratio in your stylesheet.
Click Copy report to grab the full viewport, screen, DPR, capabilities, and breakpoint snapshot as plain text for a bug report or QA log.

About this tool

Viewport Size Tester is a live diagnostic surface for everything a browser knows about the current window and display. It reads window.innerWidth and innerHeight in CSS pixels, the document client width and height, the physical screen.width and screen.height, the available screen area (the part not covered by the OS taskbar or dock), window.devicePixelRatio, color depth, and pixel depth. From the matchMedia API it derives orientation (portrait or landscape), the user's prefers-color-scheme, prefers-reduced-motion, prefers-reduced-transparency, prefers-contrast, color gamut (sRGB, P3, or Rec. 2020), pointer capability (fine, coarse, or none), hover capability, and navigator.maxTouchPoints. A responsive ruler renders the current viewport width to scale with markers for the Tailwind sm, md, lg, xl, and 2xl breakpoints, plus Bootstrap 5 and Material Design 3 window classes, so the active breakpoint is obvious at a glance. The page also reports the matching Tailwind, Bootstrap, and Material 3 token, the multiplied physical pixel resolution (CSS pixels times DPR), browser language, IANA timezone, online status, and cookieEnabled flag. A media query snippet panel emits a ready-to-paste Tailwind-equivalent @media block and a high-DPI -webkit-min-device-pixel-ratio / min-resolution query for your exact device pixel ratio. Every number refreshes on resize, orientationchange, OS dark-mode toggle, motion-preference toggle, and visibility change without polling, and a Copy report button exports the full snapshot as plain text. Nothing is sent to a server. Everything is read locally from the browser environment, so this works on locked-down corporate machines, behind firewalls, and offline.

Free to use. Works in your browser. No signup, no login.

Related tools

Viewport Size Tester

How to use

About this tool

You may also like

Screen Size Calculator

Aspect Ratio Calculator

User Agent Parser

Pixels to REM Converter

DPI Calculator

Keyboard Event Tester