Your Viewport Right Now
The numbers above show your current viewport: the width and height of the visible page area in CSS pixels. Resize the window and watch them change.
Technically, on most desktop browsers the viewport width equals document.documentElement.clientWidth — very close to the window width, minus any scrollbar.
Viewport vs Browser Window vs Screen
| Term | Meaning | Typical Size |
|---|---|---|
| Screen | Your physical display resolution | 1920 × 1080 |
| Browser window | The whole browser including tabs and toolbars | varies |
| Viewport | The visible page area inside the browser | varies |
On a phone the viewport behaves differently: without a meta viewport tag, mobile browsers use a wide "layout viewport" (often 980px) and shrink it to fit the screen.
Viewport and Responsive Design
Responsive websites adapt to the viewport size using:
- Media queries — CSS rules that apply at certain widths, e.g.
@media (min-width: 768px). - Breakpoints — common widths such as 640px, 768px, 1024px and 1280px (used by Tailwind CSS).
- The viewport meta tag —
<meta name="viewport" content="width=device-width, initial-scale=1">makes phones use the real device width.
Developers use tools like this one to check exactly what size their layout will render at.
Frequently Asked Questions
What is a viewport in web design?
The viewport is the part of the page the user can see inside their browser. Responsive design uses the viewport size to decide how the layout should look on different devices.
What is the default viewport size?
It depends on the device. Common examples: 360px wide phones, 768–1024px tablets, and 1280–1920px desktops. There is no single default.
What does the viewport meta tag do?
It tells mobile browsers to use the actual device width for the page layout instead of a virtual 980px width, so sites render correctly on small screens.