The viewport is the visible display area of a website on a screen or device. In web development and responsive web design, it forms the basis for how layout and content are adapted to different screen sizes, without a correctly configured viewport, responsive design doesn’t work reliably.
The viewport meta tag
For mobile browsers to display a page at the actual device width instead of a shrunken desktop view, every responsive website needs this tag in the <head>:
<meta name="viewport" content="width=device-width, initial-scale=1">
width=device-width: the layout viewport orients itself on the actual device width instead of a fixed desktop width.initial-scale=1: the page is displayed without additional zoom on first load.
Without this tag, mobile browsers load the page at a desktop width by default (usually 980px) and then scale it down – text and elements look tiny and hard to read as a result.
Layout viewport vs. visual viewport
- Layout viewport: the entire available display area on which the page is rendered – can be larger than the actually visible area.
- Visual viewport: the section of it actually visible without scrolling or zooming. When zooming in, the layout viewport stays unchanged while the visual viewport shrinks.
Responsive design primarily takes the visual viewport into account to ensure content is appropriately scaled and arranged on every screen size.
Dynamic viewport units: dvh, svh, lvh
A long-underestimated problem: classic CSS units like vh (viewport height) don’t account for mobile browsers showing and hiding their address bar while scrolling – the actually visible height changes continuously as a result, which led to jumping layouts. Modern CSS units solve this in a targeted way:
| Unit | Meaning |
|---|---|
svh | Small viewport height – the smallest possible height (address bar shown) |
lvh | Large viewport height – the largest possible height (address bar hidden) |
dvh | Dynamic viewport height – adapts live to the current height |
For elements meant to reliably fill the full screen height (hero sections, say), dvh units are today the more robust choice over classic vh.
Viewport and mobile-first design
A correctly configured viewport is the technical prerequisite for mobile-first design – the approach of developing layouts for small screens first and then extending them step by step for larger ones. Since Google has primarily evaluated a page’s mobile presentation for indexing for years, a faultily configured viewport directly harms the search engine ranking.
Conclusion
The viewport is one of the most inconspicuous yet technically most important details of responsive web design, without correct configuration, the mobile presentation fails no matter how well thought-out the rest of the layout is. We account for viewport and responsive requirements in every project from the start. More as part of our website development or in an informal chat, with no strings attached.
Häufige Fragen
What exactly does the <meta name="viewport"> tag do?
What's the difference between the layout viewport and the visual viewport?
Why does a website without a viewport meta tag look shrunken on the phone?
What are dynamic viewport units (dvh, svh, lvh) and what are they needed for?
vh don’t account for mobile browsers showing and hiding their address bar while scrolling, which changes the actually visible height continuously. The dynamic units svh (smallest possible height), lvh (largest possible height) and dvh (the current, live-adapting height) solve exactly this problem and prevent jumping layouts on mobile devices.