Viewport Size & Responsive Breakpoint Tester
See how big your browser window really is to a web page. This tool reads your viewport width and height in CSS pixels, your device pixel ratio and orientation, and shows which responsive breakpoint the current size falls into — all live. Resize the window and every value updates instantly.
Resize your browser window and watch these values update live.
Tailwind CSS breakpoints
The range your viewport falls into is highlighted as you resize.
| Prefix | Min width | Applies from |
|---|---|---|
| base | 0px | 0 – 639px |
| sm | 640px | 640 – 767px |
| md | 768px | 768 – 1023px |
| lg | 1024px | 1024 – 1279px |
| xl | 1280px | 1280 – 1535px |
| 2xl | 1536px | 1536px+ |
Device categories
Resizable test panel
Drag the bottom-right corner to resize this panel. It reports its own size and which breakpoint that width would hit — a quick responsive gauge.
Common device viewport sizes
Approximate portrait CSS-pixel viewports for reference — actual values vary by browser and OS.
| Device | Viewport (CSS px) | DPR |
|---|---|---|
| iPhone SE | 375 × 667 | 2× |
| iPhone 15 / 14 Pro | 393 × 852 | 3× |
| Pixel 8 | 412 × 915 | 2.6× |
| iPad mini | 768 × 1024 | 2× |
| iPad Pro 11" | 834 × 1194 | 2× |
| Surface Pro | 912 × 1368 | 2× |
| Laptop (720p) | 1280 × 720 | 1× |
| Laptop (1080p) | 1366 × 768 | 1× |
| Desktop (1080p) | 1920 × 1080 | 1× |
Related tools
What a viewport is
The viewport is the visible area a web page has to draw into — the content region of your browser window, not counting the tabs, address bar, or bookmarks bar. That is why it is almost always smaller than your screen resolution: the screen is the whole panel, while the viewport is just the slice the page can use. window.innerWidth and window.innerHeight report that area in CSS pixels, and documentElement.clientWidth/clientHeight report the layout viewport (the same area minus a classic scrollbar's width, when one is present). Because the viewport changes the instant you resize, split-screen, or rotate the device, it is the number responsive layouts actually respond to.
CSS pixels vs device pixels and devicePixelRatio
A CSS pixel is a layout unit, not a physical dot on the panel. On a standard display one CSS pixel maps to one physical pixel, but high-density 'Retina' screens pack two or three physical pixels into each CSS pixel so text looks sharper. window.devicePixelRatio tells you that multiplier: a value of 2 means a 1440-CSS-pixel-wide viewport is drawn with 2880 physical pixels. Web pages are laid out in CSS pixels, so a phone reporting a 390-pixel-wide viewport with a DPR of 3 has a physical panel roughly 1170 pixels across. To see the full physical resolution and pixel density of your screen, use the What Is My Screen Size and Screen Resolution Test tools.
Responsive breakpoints
A breakpoint is a viewport width at which a layout changes — columns stack, a menu collapses, type resizes. CSS media queries and utility frameworks such as Tailwind CSS define a small set of named widths and apply styles from that width upward. Tailwind's defaults are sm at 640px, md at 768px, lg at 1024px, xl at 1280px, and 2xl at 1536px; below 640px you are in the unprefixed base range. The reference below highlights the active range as you resize, and the draggable test panel reports which breakpoint its own width would hit — a quick way to preview how a component behaves at different sizes without changing your whole window.
Why innerWidth differs from screen width
Several things sit between your panel's resolution and the viewport a page sees. Browser chrome (tabs, toolbars, and a visible scrollbar) subtracts from the usable area. Page zoom changes it too: zooming in reduces the number of CSS pixels that fit, so innerWidth drops even though the window has not moved, and it also nudges devicePixelRatio. On mobile, the meta viewport tag — <meta name="viewport" content="width=device-width, initial-scale=1"> — tells the browser to set the layout viewport to the device width instead of pretending to be a ~980px desktop, which is why responsive sites need it. Operating-system display scaling changes the CSS-pixel count as well, which is why two identical monitors can report different viewport sizes.