Viewport

The viewport is simply the part of a web page you can see without scrolling. On a phone, the viewport is small and narrow. On a desktop monitor, it's wide. On a tablet, it's somewhere in between.

Every device has a different viewport size. An iPhone 15 has a viewport that's 393 pixels wide. A standard laptop is around 1,366 pixels wide. That's a huge difference, and it's why the same website can look great on one device and terrible on another.

When web developers talk about the viewport, they're usually talking about making sure your site looks right no matter what size screen someone is using. This is the foundation of responsive design.

Why It Matters

Over 60% of all web traffic now comes from mobile devices. If your website was designed only for a desktop viewport, more than half your visitors are getting a bad experience. Text might be too small to read. Buttons might be too close together to tap. Important content might be cut off or hidden.

Google uses mobile-first indexing, which means it ranks your site based on how it looks on a phone viewport, not a desktop one. If your site doesn't work well on a small screen, your search rankings will suffer regardless of how good it looks on a computer.

There's also a direct line between viewport and conversions. Content that appears in the viewport immediately (without scrolling) gets the most attention. That's why your most important message and your main call to action should be visible the moment someone lands on your page.

The Basics

The viewport meta tag. Every modern website needs a small line of code in its header that tells browsers how to handle the viewport. Without it, mobile browsers will try to show the desktop version of your site shrunk down to fit a phone screen. Most website builders and CMS platforms add this automatically.

Viewport units. Designers use viewport-based measurements (like "vh" for viewport height) to make elements scale with the screen. A hero section set to 100vh will always fill exactly one screen, whether that's a phone or a desktop monitor.

Testing across viewports. You can test how your site looks at different viewport sizes using your browser's developer tools. In Chrome, press F12 and click the device icon to toggle between phone, tablet, and desktop views. This gives you a quick look at how your site adapts.

Common breakpoints. Most websites are designed to shift their layout at specific viewport widths. A typical setup might rearrange the layout at 768 pixels (tablet) and 1,024 pixels (desktop). Below 768 pixels, everything stacks vertically for easier reading on phones.

FAQ

What's the difference between viewport and screen size?

Screen size is the physical measurement of your device's display. The viewport is the usable area inside the browser window where web content appears. On a desktop, the viewport is smaller than the screen because the browser's toolbar and address bar take up space. On mobile, the viewport and screen size are nearly the same.

Why does my website look zoomed out on mobile?

This usually means your site is missing the viewport meta tag. Without it, mobile browsers default to showing a wide (desktop-width) version of your page, then shrinking everything down to fit. Adding the proper meta tag tells the browser to match the viewport to the device's actual width.

Do I need to design for every possible viewport size?

No. You don't need a separate design for every device. Responsive design uses flexible layouts that adapt smoothly across sizes. Focus on getting your site right at three main sizes: phone (around 375px wide), tablet (around 768px), and desktop (around 1,280px). Everything in between should flow naturally.