The viewport is the visible area of a web page in the browser window, measured in CSS pixels. On a desktop, the viewport is the browser tab’s content area. On mobile, it’s whatever portion of the page is currently displayed on the screen. Developers control viewport behavior with the viewport meta tag and CSS viewport units (vw, vh, dvh, svh, lvh). Getting the viewport right is the foundation of responsive web design — get it wrong and your site is unusable on mobile.
What Is a Viewport?
A viewport is the rectangular area where content is displayed in a browser. Unlike the screen (the physical display) or the device width (the hardware), the viewport is a logical measurement specific to the browser. CSS positions and sizes elements relative to this viewport.
Three viewport concepts often get confused:
- Device pixels — the physical pixels on the screen. A 2026 iPhone has 1170+ device pixels across.
- CSS pixels — the logical pixels CSS uses. Independent of physical resolution. The same iPhone has about 390 CSS pixels across.
- Device pixel ratio (DPR) — the ratio between device pixels and CSS pixels. The iPhone above has a DPR of 3 (1170 ÷ 390).
This abstraction means a 16px font looks the same physical size across devices regardless of resolution. CSS pixels normalize the experience.
The Viewport Meta Tag
The viewport meta tag tells mobile browsers how to render the page. Without it, mobile browsers render the page as if it were a desktop site (typically 980px wide) and zoom out to fit — producing tiny, unreadable text and requiring users to pinch-zoom to read anything.
Every modern site should include this meta tag in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">Common Viewport Meta Properties
- width=device-width — sets the viewport width to match the device width.
- initial-scale=1 — sets the initial zoom level to 1 (no zoom).
- minimum-scale — minimum zoom level (default 0.1).
- maximum-scale — maximum zoom level (default 10).
- user-scalable — whether users can zoom (default yes).
- viewport-fit — how the viewport handles notches and rounded corners on modern phones.
Accessibility Warning
Never disable user-scaling. Setting user-scalable=no or maximum-scale=1 prevents users with low vision from zooming the page. It violates WCAG 2.1 accessibility standards. The only acceptable use case is highly specialized applications where the entire UI is built around custom zoom behavior — even then, document the trade-off.
Viewport Units
CSS provides several units that size elements relative to the viewport. They’re indispensable for responsive design but each has nuances worth understanding.
vw and vh
1vw = 1% of the viewport’s width. 1vh = 1% of the viewport’s height. So width: 50vw always sizes an element to half the viewport width regardless of pixel resolution.
These units work brilliantly for full-screen heroes, sticky CTAs, and proportional spacing — until mobile browsers introduce a problem.
The vh Mobile Problem
On mobile browsers, the URL bar and bottom navigation can appear and disappear as the user scrolls. The browser had to choose: does 100vh mean the viewport with the URL bar visible, or without? Historically, mobile Safari and Chrome chose the larger viewport — so a height: 100vh element extended beneath the URL bar, getting clipped when the bar was visible.
The fix arrived with the dynamic viewport units in 2022-2023, now well-supported across modern browsers in 2026.
Dynamic Viewport Units: dvh, svh, lvh
- dvh (dynamic) — adjusts as the URL bar shows/hides.
100dvhalways equals the current viewport height. - svh (small) — the smallest possible viewport (URL bar visible).
- lvh (large) — the largest possible viewport (URL bar hidden).
For most full-screen heroes in 2026, use min-height: 100svh or 100dvh. The dynamic unit produces smoother animation as the URL bar shifts but can cause layout shift; the small unit is more conservative but always works.
vmin and vmax
- 1vmin = 1% of the smaller dimension (width or height).
- 1vmax = 1% of the larger dimension.
These are useful for elements that should look balanced regardless of orientation — like a square logo that should be 20% of the smaller dimension whether the device is landscape or portrait.
Viewport Strategies in Responsive Design
Modern responsive design relies on the viewport being correctly configured. Three high-level strategies dominate:
Mobile-First
Design and code for the smallest viewport first, then progressively add styles for larger viewports via min-width media queries. This forces clarity about what’s essential and produces leaner CSS. See our mobile-first design guide.
Desktop-First
Design for desktop, then use max-width media queries to adapt down for smaller viewports. More common historically, less common in 2026 since most traffic is mobile.
Container Queries
A newer paradigm: components respond to their container’s size rather than the viewport’s size. Container queries (now widely supported in 2026) decouple component responsive behavior from page-level viewport, which makes design systems far more reusable. They don’t replace viewport queries but complement them.
Common Viewport Breakpoints
There’s no official standard, but these are the most common 2026 breakpoints:
- 320-480px — small phones
- 481-767px — large phones
- 768-1023px — tablets
- 1024-1279px — small desktops and large tablets
- 1280-1535px — standard desktops
- 1536px+ — large desktops and ultra-wide displays
Tailwind CSS defaults align closely: sm=640, md=768, lg=1024, xl=1280, 2xl=1536. Use breakpoints based on where your content actually breaks, not on specific device sizes — there are too many devices to design for each one individually.
Viewport and Typography
Fluid typography uses viewport units to scale text smoothly across screen sizes. The classic pattern:
font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem);This says: minimum 1rem, maximum 1.5rem, fluid value in between based on viewport width. The result: large text on desktop, smaller on mobile, smooth transition with no breakpoint jumps. Our website typography guide covers fluid type scales in detail.
Viewport Gotchas
iOS Safari Bottom Bar
On iOS Safari, the bottom toolbar appears and disappears as users scroll. Elements positioned with position: fixed; bottom: 0 sit behind the toolbar when it appears. Use safe-area-inset CSS environment variables to offset:
padding-bottom: env(safe-area-inset-bottom);Notches and Punch Holes
Modern phones have non-rectangular displays. The viewport-fit=cover meta property combined with safe-area-inset variables ensures content respects notches and rounded corners.
Zoom Behavior
When users zoom in on iOS, form input fields with font-size less than 16px trigger an auto-zoom. Set form input font-size to at least 16px to prevent the jarring zoom.
Landscape Orientation
Landscape on phones often produces tiny viewport heights (300-400px). Heroes designed with height: 100vh dominate the screen entirely. Use min-height rather than height and consider max-height caps for hero sections.
Foldables
Foldable phones expose two different viewport dimensions (folded and unfolded). CSS media queries with (orientation: landscape) and the CSS Spanning specification let you handle hinge layouts, but most sites don’t need to optimize for this yet.
Testing Viewport Behavior
Browser DevTools have dedicated mobile emulators (Chrome’s Device Mode, Safari’s Responsive Design Mode, Firefox’s Responsive Design Mode). Use them as a starting point — but always validate on real devices when possible.
Tools for Real-Device Testing
- BrowserStack — cloud-based real device testing across 3,000+ device/browser combinations.
- LambdaTest — similar to BrowserStack with strong automation support.
- Sauce Labs — enterprise-grade testing infrastructure.
- Personal devices — nothing beats holding an actual phone. Most teams keep 3-5 reference devices.
Viewport in Framer, WordPress, and Other Builders
Modern site builders handle viewport meta tags automatically. You shouldn’t need to think about the meta tag itself — but you do need to think about how your design responds across viewports.
Framer
Framer’s responsive design system handles viewport units natively. Breakpoints can be defined per project and components automatically inherit responsive behavior. Auto Layout (Stack/Grid) responds to viewport changes without manual width adjustments.
WordPress
WordPress themes include viewport meta tags by default. Page builders like Elementor, Divi, and Bricks let you set different styles per breakpoint visually. Verify your theme outputs width=device-width, initial-scale=1 by inspecting the page source.
Webflow
Webflow exposes four breakpoints by default (desktop, tablet, mobile landscape, mobile portrait) and lets you add custom ones. Each breakpoint inherits from the larger one — styles cascade downward.
Frequently Asked Questions
What’s the difference between viewport and screen size?
The screen is the physical display measured in device pixels. The viewport is the logical area where content renders, measured in CSS pixels. They’re related but not the same — a 1170 device-pixel iPhone has roughly a 390 CSS-pixel viewport because of the device pixel ratio.
Should I disable zoom on my mobile site?
Almost never. Disabling zoom violates WCAG 2.1 accessibility standards and locks out users with low vision. Native-feeling web apps are a narrow exception, but most sites benefit from leaving zoom enabled.
What’s better, vh or dvh?
Use dvh or svh for full-screen elements in 2026. vh worked everywhere historically but caused clipping on mobile when the URL bar showed/hid. dvh adjusts dynamically; svh stays at the smallest possible viewport so layout is stable.
How do I make text scale with the viewport?
Use the CSS clamp() function with viewport units. Example: font-size: clamp(1rem, 2vw + 0.5rem, 1.5rem); produces smoothly fluid type that respects minimum and maximum sizes.
Need a site that renders flawlessly across every viewport? See our pricing or contact us — we build Framer sites with responsive design baked in from day one.