What is my viewport size?
The viewport is the part of the browser window that shows the page. Here is its size in CSS pixels, and it updates as you resize.
Your viewport
Reading your screen…
Breakpoints
| Name | Viewport width |
|---|---|
| base | Under 640 px |
| sm | 640 to 767 px |
| md | 768 to 1023 px |
| lg | 1024 to 1279 px |
| xl | 1280 to 1535 px |
| 2xl | 1536 px and up |
What the viewport is
- Not your screen. The viewport is the visible area of the page: the browser window without its toolbars and tabs. Content wider than it makes the page scroll sideways.
- Where layouts change. Responsive CSS compares its media queries with the viewport width, scrollbar included. The breakpoint above uses the Tailwind CSS defaults.
- Orientation. As in CSS, a viewport that is at least as wide as it is tall counts as landscape, otherwise portrait. It follows the window, not the device.
Questions
Your screen size is the whole display. Your viewport is only the part of the browser window that shows the page, so it is smaller than the screen by the width of the browser frame and the height of its toolbars and tabs.
Zooming makes each CSS pixel bigger on the screen, so fewer of them fit across the same window. At 200% zoom a window 1280 pixels wide has a viewport of 640 pixels, which is how a desktop browser can show a layout made for a small screen.
The Tailwind CSS defaults: sm at 640 px, md at 768 px, lg at 1024 px, xl at 1280 px and 2xl at 1536 px. Other frameworks use other cut-offs (Bootstrap uses 576, 768, 992, 1200 and 1400 px), so check the values your own project uses.