What Is My Viewport?

Q: What is a viewport?

The viewport is the visible portion of a web page inside the browser window, measured in CSS pixels. It excludes toolbars, scrollbars and window borders, so it is smaller than your full screen resolution.

Q: Why is my viewport smaller than my screen resolution?

The browser interface (tabs, address bar, scrollbars) takes up space, and viewport is reported in CSS pixels while screen resolution is often stated in physical pixels. High device-pixel-ratio displays make the gap larger.

Q: How do I set the viewport for a website?

Add the meta tag width=device-width, initial-scale=1 in the page head. It tells mobile browsers to match layout width to the device CSS-pixel width instead of zooming out a desktop layout.

Q: Does the viewport change when I resize the window?

Yes. The viewport updates live as you resize the browser, rotate the device, or open and close the on-screen keyboard.

Instantly detect your current viewport width & height.

Viewport (CSS pixels)

— × —

DPR: — • Zoom: —

Viewport (CSS)

—

Viewport (physical)

—

Screen pixels

—

Orientation

—

Viewport = visible area of the web page in CSS pixels. Physical viewport = CSS viewport × DPR. If zoomed, DPR and viewport values change.

Browser Viewport

Your viewport is the visible area of a webpage inside your browser window. Unlike screen resolution, which measures the full pixel dimensions of your device’s display, the viewport measures only the space available for web content after subtracting browser toolbars, tabs, address bar, and system UI elements. It represents the actual width and height your device gives to a webpage.

Why Viewport Matters

A well-defined viewport is essential for responsive design, ensuring websites adjust smoothly across desktops, tablets, and mobile phones. Search engines like Google prioritize websites that display correctly at all viewport sizes, making viewport accuracy a direct factor in better user experience, lower bounce rates, and improved SEO performance. Your viewport dimensions help developers optimize layout, text scaling, UI scaling, and performance for your specific device.

Viewport size vs screen resolution

Your viewport is the visible area of a web page inside the browser — reported by window.innerWidth and window.innerHeight. It’s almost always smaller than your screen resolution because it excludes the browser toolbar, address bar, scrollbars, and (on desktop) any window chrome. On phones, the on-screen keyboard and browser UI shrink it further. That’s why the viewport is the number that actually matters for responsive web design: it’s the space your layout has to work with.

Common viewport sizes and breakpoints

Designers target ranges of viewport widths (“breakpoints”) rather than exact devices. These are the widths most responsive layouts are built around:

Device class	Typical viewport width	Common breakpoint
Small phones	320–360 px	< 576 px
Large phones	390–430 px	< 768 px
Tablets (portrait)	768–834 px	≥ 768 px
Tablets / small laptops	1024–1280 px	≥ 992 px
Desktops	1280–1920 px	≥ 1200 px

Note that viewport width is measured in CSS pixels, not physical pixels — a phone with a 1080-pixel-wide screen and a 3× device pixel ratio reports a viewport of only 360 CSS pixels. That’s exactly why responsive breakpoints use CSS pixels.

Frequently asked questions

What is a viewport?

The viewport is the visible portion of a web page inside the browser window, measured in CSS pixels. It excludes toolbars, scrollbars and window borders, so it’s smaller than your full screen resolution.

Why is my viewport smaller than my screen resolution?

Because the browser’s interface (tabs, address bar, scrollbars) takes up space, and because viewport is reported in CSS pixels while screen resolution is often stated in physical pixels. High-DPR displays make the gap larger.

How do I set the viewport for a website?

Add the meta tag <meta name="viewport" content="width=device-width, initial-scale=1"> in your page’s head. This tells mobile browsers to match the layout width to the device’s CSS-pixel width instead of zooming out a desktop layout.

Is viewport size the same as resolution?

No. Resolution is the total pixel count of the screen; viewport size is the CSS-pixel area currently available to the page inside the browser. They only match in rare full-screen, 1× cases.

Does the viewport change when I resize the window?

Yes — the viewport updates live as you resize the browser, rotate the device, or open/close the on-screen keyboard. The checker above reflects those changes in real time.