Viewport Size Tester
Your live browser viewport size, the CSS breakpoint it falls into, scrollbar width, pinch zoom, and what 100vh, svh, lvh and dvh really measure. Resize the window or rotate your phone and watch it update.
Your viewport right now
Viewport (innerWidth × innerHeight)
–
Reading your viewport…
Breakpoint ruler
| Device (approximate) | Viewport | Breakpoint |
|---|---|---|
| Galaxy S24 / small Android | 360 × 780 | base |
| iPhone SE (3rd gen) | 375 × 667 | base |
| iPhone 15 / 16 | 393 × 852 | base |
| Pixel 8 | 412 × 915 | base |
| iPhone 16 Pro Max | 440 × 956 | base |
| iPad mini | 744 × 1133 | sm |
| iPad Air 11" | 820 × 1180 | md |
| iPad Pro 13" | 1032 × 1376 | lg |
| Small laptop (1366 × 768) | 1366 × 768 | xl |
| MacBook Air 13" | 1470 × 956 | xl |
| Full HD desktop | 1920 × 1080 | 2xl |
| QHD desktop | 2560 × 1440 | 2xl |
Sizes are CSS pixels in the default display setting. Phones are portrait; laptop numbers depend on OS scaling, and the browser's own UI takes some of the height.
Viewport height units
Viewports, breakpoints and testing
Viewport vs. window vs. screen
The screen is the whole display. The window is the browser frame, tabs and toolbars included. The viewport is the area your page draws into, and it is the one that media queries such as min-width: 768px test. innerWidth includes a classic scrollbar, while clientWidth does not, which is why a layout set to 100vw can overflow sideways by a few pixels. For the display itself, use what is my screen size.
Why 100vh is broken on mobile
Mobile browsers show and hide their address bar as you scroll. They define 100vh as the tallest state, so a full-height hero gets cut off under the bar on load. The newer units fix this: svh is the shortest state, lvh the tallest, and dvh tracks whatever is showing. Use svh for layouts that must fit, and dvh sparingly, because it can trigger relayout while scrolling.
Scrollbars and zoom
Classic Windows scrollbars take about 15 to 17 px, Linux varies by theme, and macOS, iOS and Android use overlay scrollbars that take 0 px unless "Always show scroll bars" is on. Browser zoom (Ctrl and +) shrinks the CSS viewport and raises the pixel ratio, so 1280 px at 125% zoom reports 1024 px and can switch breakpoint. Pinch zoom is different: the layout viewport stays put and only the visual viewport scale changes.
Testing tips
Devtools device mode is quick for checking breakpoints, but it fakes the user agent and pixel ratio and has no real address bar, so 100vh bugs never show up. Check the final build on at least one real iPhone and one Android phone, in both orientations, and on a Windows machine with visible scrollbars. Open this page on each and copy the JSON into your bug report so everyone talks about the same numbers.
Related tools
See the full display numbers with what is my screen size, confirm your monitor runs at native resolution with the screen resolution test, work out ratios for responsive images with the aspect ratio calculator, or mark the middle of the display with the screen center finder.
Frequently asked questions
What is the viewport, and how is it different from the screen?
The viewport is window.innerWidth by window.innerHeight: the page area that min-width media queries test. A classic scrollbar is included in that width. The browser window is outerWidth by outerHeight, frame and toolbars included. The screen is screen.width by screen.height, the whole display. documentElement.clientWidth leaves the scrollbar out. This page does not treat innerWidth as the screen resolution.
What do 100vh, 100svh, 100lvh and 100dvh measure?
Each figure is the rendered height of a hidden bar set to that unit, rounded to one decimal. 100vh is the classic unit and, on mobile, matches 100lvh, the tall state with the browser UI hidden. 100svh is the short state with the UI fully shown. 100dvh follows the UI as it moves. When a gap is shown, it is lvh minus svh, rounded to the nearest pixel. When CSS.supports does not accept height 100dvh, the page says svh, lvh and dvh are unsupported and those three readings stay 0.
Which breakpoint names match which widths?
The menu selects the ranges. Below the first step the label is the base name; from there it is the name of the largest min-width innerWidth has reached. Tailwind is base below 640, then sm 640, md 768, lg 1024, xl 1280 and 2xl 1536. Bootstrap 5 is xs below 576, then sm 576, md 768, lg 992, xl 1200 and xxl 1400. Material UI is xs below 600, then sm 600, md 900, lg 1200 and xl 1536. Custom text is split on commas, semicolons and new lines. Each piece may have a letter-led name, an optional colon or equals sign, then 1 to 5 digits and an optional px. Widths above 20000, repeated widths, and anything that does not match are skipped, so bad input does not throw. An entry at 0 px supplies the base name. If there is no 0, the base label is below first.
How do browser zoom and pinch zoom show up?
Browser zoom shrinks the CSS viewport and raises devicePixelRatio, which this page rounds to three decimals. A 1280 px layout at 125% zoom reports 1024 px and can move the active breakpoint. Pinch zoom is separate: innerWidth stays put, and only visualViewport.scale changes. Pinch zoom is marked active when that scale, already rounded to three decimals, is more than 0.005 away from 1.
How is the scrollbar width worked out?
The page figure is the greater of 0 and innerWidth minus documentElement.clientWidth. The OS figure comes from a hidden 100 by 50 px box with overflow set to scroll: its offsetWidth minus its clientWidth. When that OS figure is 0, the note says overlay scrollbars take no space. Otherwise it shows the OS width in px.
Why do I see a dash, and do the readings keep updating?
The server render has no window, so the first paint shows a dash instead of 0. After the page mounts, a snapshot reads innerWidth, the screen size, the viewport units and the scrollbar probes. Resize, orientation change, visual viewport resize and scroll, media-query changes, and a ResizeObserver on the document and the unit probes refresh that snapshot. Those listeners are removed when you leave the page.