Free tool

What is my viewport size?

Your browser’s viewport in CSS pixels, updated as you resize the window. Copy it into a bug report so the developer sees the layout you saw.

Your viewport

…

CSS pixels, width × height. Resize the window to see it change.

Screen resolution: …
Device pixel ratio: …
Layout: …
Tailwind breakpoint: …

Runs in your browser. What you see or type here is not sent anywhere or stored.

What the numbers mean

The viewport is the area of the browser window that shows the page. It is measured in CSS pixels, which is the unit a website’s layout is written in, so it is the number that decides whether you get the phone, tablet or desktop version of a site. Screen resolution is the size of the whole display, and the device pixel ratio says how many physical pixels sit behind each CSS pixel.

Why a developer asks for it

“It looks broken on my screen” cannot be fixed until someone can see the same layout. A layout bug usually exists at one range of widths only, and the viewport size is the fastest way to say which. Send it with the page address and a screenshot. For everything else worth including, see how to give website feedback developers can act on.

Common viewport widths

Phones are mostly 360 to 430 pixels wide, tablets 768 to 1024, laptops 1280 to 1536 and desktop monitors 1920 and up. The breakpoint shown above uses Tailwind CSS’s default scale (640, 768, 1024, 1280, 1536), which many sites share; a site can define its own.

Skip the copy and paste

With Layerdock, a reviewer clicks the element on the live site and types a comment. The screenshot, page, browser, OS and viewport are attached to the pin automatically, so nobody looks anything up. Try it on your own site, no account needed.

Ready when you are

Make the next
website review easier.

Give your team and clients one clear place to see the issue, capture the context, and share the fix.

Explore the tools

FAQs

Frequently asked questions

About this tool and the numbers it shows.

What is a viewport?

The viewport is the part of the browser window that shows the web page, without the address bar, tabs or toolbars. Its size is measured in CSS pixels.

Why is my viewport smaller than my screen resolution?

Two reasons. The browser’s own bars take space, and on high-density screens one CSS pixel covers several physical pixels. A phone with a 1170-pixel-wide screen at 3x has a 390-pixel-wide viewport.

Does zooming change the viewport size?

Yes. Zooming in makes each CSS pixel larger, so fewer fit: at 200% zoom a 1440-pixel-wide window reports a 720-pixel viewport, and the page may switch to its tablet or phone layout.

What viewport sizes should I test a website at?

At least one phone width (around 390 pixels), one tablet width (around 768) and one desktop width (1280 or 1440), plus any width where your own layout changes.