Viewport Size Checker
Determine the exact viewport width and height of the current browser window.
What is the Viewport Size Checker?
The Viewport Size Checker is a free tool that reports the current width and height of your browser viewport in pixels, and updates live as you resize the window. It also shows the device's screen resolution and pixel ratio.
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 the Viewport Size Checker
- 1Open the tool; it immediately shows your current viewport width and height in pixels.
- 2Resize your browser window and watch the dimensions, orientation, and aspect ratio update in real time.
- 3Check the highlighted breakpoint card to see which responsive range your viewport is in.
- 4Compare the Viewport Size and Screen Resolution panels to see the difference between the browser window and the full display.
- 5Note the Device Pixel Ratio value to understand how CSS pixels map to physical pixels on your screen.
- 6Use the Responsive Breakpoints list as a reference for the standard min and max widths.
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.
- Screen resolution 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
How do I check my browser's 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 resolution?
The viewport is the visible area inside the browser window and changes when you resize it, while screen resolution is the fixed pixel size of your physical display. 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.