What is a viewport
Viewport is the visible area of a web page in a browser window. On desktop, the viewport is the same size as the browser window. On mobile devices, it is more complicated: without a special meta tag, the browser displays the page as if the screen were 980 pixels wide, then scales it to fit the screen, making the text tiny.
The viewport meta tag solves this problem by telling the browser how to scale the page for a specific device:
<meta name="viewport" content="width=device-width, initial-scale=1" />This tag is essential for any modern website and is one of Google's requirements for mobile optimization.
Why a viewport is needed
Mobile-first indexing: Since 2020 year, Google has used the mobile version of a website for indexing and ranking. A page without a viewport meta tag gets lower rankings.
User experience: Without a viewport, mobile users see a scaled-down desktop page with unreadable text.
Core Web Vitals: An incorrect viewport causes problems with CLS and other metrics.
Google Mobile-Friendly: A page without a viewport is marked as "not mobile-friendly."
Viewport parameters
Basic tag
<meta name="viewport" content="width=device-width, initial-scale=1" />width=device-width — set the viewport width to the device width (320px for iPhone SE, 414px for iPhone Plus).
initial-scale=1 — initial scale of 1:1 (do not scale on load).
Additional parameters
<!-- Запрет ручного масштабирования (не рекомендуется для accessibility) -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
<!-- Разрешить масштабирование до 5x -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5" />Important: user-scalable=no harms accessibility. Users with visual impairments will not be able to zoom the page. Most browsers ignore this parameter by default.
CSS units and the viewport
CSS supports viewport-relative units:
/* vw — 1% ширины viewport */
.hero {
width: 100vw; /* полная ширина */
padding: 5vw; /* отступы относительно ширины */
}
/* vh — 1% высоты viewport */
.fullscreen {
height: 100vh; /* полная высота экрана */
min-height: 100dvh; /* dynamic viewport height (лучше для мобильных) */
}
/* dvw, dvh — dynamic viewport (учитывает адресную строку браузера) */
.mobile-friendly {
height: 100dvh;
}
/* svw, svh — small viewport (минимальный, без адресной строки) */
/* lvw, lvh — large viewport (максимальный) */Media queries and the viewport
/* Адаптивный дизайн через breakpoints */
/* Mobile first */
.container {
padding: 16px;
font-size: 16px;
}
/* Tablet */
@media (min-width: 768px) {
.container {
padding: 24px;
max-width: 720px;
margin: 0 auto;
}
}
/* Desktop */
@media (min-width: 1200px) {
.container {
max-width: 1140px;
font-size: 18px;
}
}Viewport JavaScript API
// Размеры viewport
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
// Responsive breakpoint в JS
const isMobile = window.matchMedia('(max-width: 768px)').matches;
// Visual Viewport API (учитывает клавиатуру на мобильных)
const visualViewportHeight = window.visualViewport?.height || window.innerHeight;Check the viewport with reChecker
Use Responsive Tester to check how a website displays at different screen sizes. The tool shows:
- How the page displays on 6 device types
- Horizontal scrolling issues
- Whether the viewport meta tag is present and correct
- Design responsiveness at different resolutions
FAQ
Is a viewport needed for desktop websites? Yes. Even if a website is not responsive, the viewport meta tag helps browsers display the page correctly. Google checks for a viewport when assessing mobile optimization.
Why is 100vh on mobile not equal to the screen height?
On mobile browsers, the address bar takes up some of the available space. 100vh = the full height, including the hidden address bar. For the actual visible height, use 100dvh (dynamic viewport height) or window.visualViewport.height.
What is horizontal scrolling and how do you remove it?
If content is wider than the viewport, horizontal scrolling appears. Causes include fixed-width elements, flex/grid container overflow, and absolute positioning beyond the screen. Fix it with overflow-x: hidden on the body or by correcting the specific element.