# Viewport Size Checker

> What is my viewport size? See your browser's current width and height in CSS pixels, updated live as you resize. Compare it with your screen size.

- **Source:** DevDreaming (https://devdreaming.com)
- **Canonical URL:** https://devdreaming.com/tools/viewport-size-checker
- **Category:** Frontend & CSS
- **Price:** Free - no signup

---

## What this tool does

What is my viewport size? The live width x height above answers that question in CSS pixels and updates as you resize the browser window. The viewport is the space available to the page; the screen size is the full display reported by your browser.

It identifies which common responsive breakpoint your viewport currently falls into, from Mobile (XS) up to Large (2XL), and highlights that breakpoint in a reference list of standard ranges.

The tool runs entirely in your browser with no signup, reading values straight from window.innerWidth, window.innerHeight, and window.screen. No data leaves your device.

## How to use it

1. Open the tool; it immediately shows your current viewport width and height in pixels.
2. Resize your browser window and watch the dimensions, orientation, and aspect ratio update in real time.
3. Check the highlighted breakpoint card to see which responsive range your viewport is in.
4. Compare the Viewport Size and Screen Size panels to see the difference between the browser window and the full display.
5. Note the Device Pixel Ratio value to understand how CSS pixels map to physical pixels on your screen.
6. Use the Responsive Breakpoints list as a reference for the standard min and max widths.

**[Open the Viewport Size Checker tool ->](https://devdreaming.com/tools/viewport-size-checker)**

This tool runs in your browser and cannot be operated from this Markdown copy - open the link above to use it.

## What you can use it for

- Confirming the exact viewport width at which a responsive layout breaks during development.
- Checking which Tailwind-style breakpoint a device falls into before writing media queries.
- Verifying the device pixel ratio when debugging blurry images or high-DPI assets.
- Comparing viewport size to full screen resolution when diagnosing browser chrome or zoom issues.
- Documenting the test conditions for a layout bug report with precise pixel dimensions.
- Demonstrating how orientation and aspect ratio change as a window is resized.

## Key features

- Live viewport width and height that update on every resize.
- Browser-reported screen size and device pixel ratio readout for the current display.
- Automatic detection of the active responsive breakpoint.
- Orientation and aspect ratio calculated from the current viewport.
- Reference list of standard breakpoint ranges from Mobile (XS) to Large (2XL).

## Frequently asked questions

### What is my viewport size?

Open the Viewport Size Checker and it displays your current viewport width and height in pixels right away. The values come from window.innerWidth and window.innerHeight and refresh automatically when you resize the window.

### What is the difference between viewport size and screen size?

The viewport is the area available to the page inside the browser window and changes when you resize it. The screen size describes the full display, as reported by the browser in CSS pixels. The tool shows both side by side so you can compare them.

### What responsive breakpoint is my screen in?

The tool maps your current viewport width to standard breakpoints: Mobile XS below 640px, Mobile SM 640 to 768, Tablet MD 768 to 1024, Laptop LG 1024 to 1280, Desktop XL 1280 to 1536, and Large 2XL above 1536px. The matching range is highlighted as Active.

### What does device pixel ratio mean?

Device pixel ratio is the number of physical screen pixels that correspond to one CSS pixel. A value of 2x means a high-DPI or Retina display, which is why images may need higher-resolution assets to look sharp.

### Does the viewport size update when I resize the window?

Yes. The tool listens for the browser resize event, so the width, height, orientation, aspect ratio, and active breakpoint all update in real time as you drag the window edges.

### Is the Viewport Size Checker free and private?

Yes. It is free, needs no signup, and reads viewport and screen values entirely in your browser. None of those measurements are sent to a server.

## Privacy

All tools on DevDreaming run entirely in your browser - your input is never uploaded to a server.

---

## Related on DevDreaming

- [All Free Developer Tools](https://devdreaming.com/tools)
- [Frontend & CSS Tools](https://devdreaming.com/tools/category/frontend-css)
- [Clamp() Calculator](https://devdreaming.com/tools/clamp-font-size-calculator)
- [PX to REM Converter](https://devdreaming.com/tools/px-to-rem-converter)
- [Aspect Ratio Calculator](https://devdreaming.com/tools/aspect-ratio-calculator)
- [Cursor CSS Previewer](https://devdreaming.com/tools/cursor-property-viewer)
- [CSS Triangle Generator](https://devdreaming.com/tools/triangle-generator)
- [Box Model Visualizer](https://devdreaming.com/tools/css-box-model-visualizer)

---

_This is the Markdown twin of a page on **DevDreaming** - free developer tutorials, tools, and AI resources. Source of truth: the canonical HTML URL above._