Updated April 18, 2026

View port

The visible area of a web page in the browser window — what the visitor can see without scrolling. Varies dramatically by device, and most teams don't test enough sizes.

https://
FreeNo signup~1 minute

Viewport explained

The viewport is the rectangular area of the browser window where your page content is visible. On a desktop monitor, it might be 1920x1080. On an iPhone 15 Pro, it's 393x852. On an iPad, 1024x1366. The <meta name="viewport" content="width=device-width, initial-scale=1"> tag in your HTML <head> tells mobile browsers to set the viewport width to the device width instead of pretending to be a desktop screen. Without it, mobile browsers render your page at ~980px width and zoom out to fit — making text unreadably small.

That viewport meta tag is so fundamental that forgetting it is essentially serving a broken mobile experience. Yet I still encounter landing pages without it — usually older pages or pages generated by legacy CMS templates. If mobile visitors have to pinch-to-zoom to read your headline, you've lost them.

Viewport considerations for landing pages

Design for real viewport distributions, not just your own device. Check your analytics: what's the actual range of screen sizes your visitors use? The most common mobile viewport is around 390px wide, but you'll have visitors at 320px (older phones) through 430px (large Android devices). Your design needs to work at every point in that range, not just the one your designer tested on.

"Above the fold" means different things at different viewports. Your 1440px desktop design might show the headline, subheadline, and CTA above the fold, but at 390px only the headline and half the subheadline are visible. Test your critical content at the viewport sizes that represent 80% of your actual traffic.

Related terms

Related reading

See these concepts in action

Analyze your landing page and get scored across all 8 dimensions.

https://