WEB DEVELOPMENT

Home › Glossary › Web Development· 438 ·

Viewport Meta Tag

\ˈvjuːpɔːrt ˈmɛtə tæɡ\n.

Filed underWeb DevelopmentFront End

In brief · quick answer

The viewport meta tag controls how a web page is displayed on mobile devices by setting the visible area width and initial zoom level.

§ 1 Definition

The viewport meta tag is the single line of HTML that made mobile web browsing usable. Before Apple introduced it for the iPhone in 2007, mobile browsers rendered pages at a virtual 980px width (the typical desktop size at the time) and then shrunk the result to fit the phone screen. Users had to pinch-zoom to read anything. The viewport meta tag tells the mobile browser to match the page width to the device width and set the initial zoom level. The standard declaration is `<meta name="viewport" content="width=device-width, initial-scale=1">`. Without this tag, your responsive design will not work on mobile. The browser ignores your carefully crafted media queries because it is rendering at a virtual desktop width. Do not skip this tag. Do not set fixed pixel widths. Do not disable user scaling unless you have a very good accessibility-validated reason.

§ 2 How it works

The `width` property sets the viewport width in CSS pixels. The special value `device-width` matches the physical device screen width. `initial-scale=1` sets the zoom level to 1:1 (no zoom). Additional properties: `minimum-scale`, `maximum-scale` (limit zoom range), `user-scalable` (yes/no, default yes), `viewport-fit` (handles notched displays like iPhone X). The properties are comma-separated in the `content` attribute.

§ 3 Common configurations

Standard responsive: `width=device-width, initial-scale=1`. Content that should not be zoomed: avoid `user-scalable=no` for accessibility reasons. For fixed-width mobile pages (rarely appropriate): `width=320`. For safe area handling on notched devices: add `viewport-fit=cover`.

§ 4 Common misconception

The viewport meta tag does not control the browser viewport. It controls the layout viewport, which is the virtual area the browser uses to render the CSS layout. The visual viewport is what the user sees (which can be smaller due to zoom and browser chrome). These are different concepts and JavaScript can access both (`window.innerWidth` vs. `document.documentElement.clientWidth`).

§ 5 Note

Always include the viewport meta tag on every page of a responsive site. It is often added automatically by frameworks and CMS themes, but if you are building from scratch, do not forget it. It goes in the `<head>` element.

§ 6 In code

```html
<!-- Standard responsive viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- With safe area for notched devices -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
```

§ 7 Common questions

Q. What happens without the viewport meta tag?: A. Mobile browsers render at a default virtual width (typically 980px) and scale down, making responsive layouts ineffective.
Q. Should I use `user-scalable=no`?: A. No. Disabling zoom violates WCAG accessibility guidelines. Users with visual impairments need zoom capabilities.

Key takeaways

The viewport meta tag is essential for responsive web design on mobile.
Always use `width=device-width, initial-scale=1` as the standard configuration.
Do not disable user zoom. It is an accessibility requirement.

How Atomic Glue helps

Every Atomic Glue site includes proper viewport configuration. It is the foundation of our responsive builds. Explore our Website Development services.

Get in touch

# Viewport Meta Tag

The viewport meta tag controls how a web page is displayed on mobile devices by setting the visible area width and initial zoom level.

Category: Web Development (also: Front End)

Author: Atomic Glue Team

## Definition

The viewport meta tag is the single line of HTML that made mobile web browsing usable. Before Apple introduced it for the iPhone in 2007, mobile browsers rendered pages at a virtual 980px width (the typical desktop size at the time) and then shrunk the result to fit the phone screen. Users had to pinch-zoom to read anything. The viewport meta tag tells the mobile browser to match the page width to the device width and set the initial zoom level. The standard declaration is `<meta name="viewport" content="width=device-width, initial-scale=1">`. Without this tag, your [responsive design](/glossary/responsive-design) will not work on mobile. The browser ignores your carefully crafted media queries because it is rendering at a virtual desktop width. Do not skip this tag. Do not set fixed pixel widths. Do not disable user scaling unless you have a very good accessibility-validated reason.

## How it works

## Common configurations

## Common misconception

## Note

## In code

## Common questions
Q: What happens without the viewport meta tag?
A: Mobile browsers render at a default virtual width (typically 980px) and scale down, making responsive layouts ineffective.
Q: Should I use `user-scalable=no`?
A: No. Disabling zoom violates WCAG accessibility guidelines. Users with visual impairments need zoom capabilities.

## Key takeaways

The viewport meta tag is essential for responsive web design on mobile.
Always use `width=device-width, initial-scale=1` as the standard configuration.
Do not disable user zoom. It is an accessibility requirement.

## Related entries

Last updated June 2026. Permalink: atomicglue.co/glossary/viewport-meta-tag