Meta Viewport Tag

The meta viewport tag is a <meta name="viewport"> element in the page head that controls how mobile browsers size and scale the page. It sets the layout viewport, the area against which CSS widths and media queries are calculated.

Why it matters

Without it, mobile browsers assume a desktop-sized layout width, typically around 980 pixels, and shrink the whole page to fit the screen. Text becomes tiny and media queries meant for phones never match. Adding the tag makes the layout width equal to the device width, so responsive CSS behaves as designed. Search engines also treat a missing tag as a mobile usability problem.

Example

<meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width matches the layout to the screen width in CSS pixels. initial-scale=1 sets the starting zoom to 100 percent.

Common mistakes

• Adding user-scalable=no or maximum-scale=1, which blocks pinch zoom and harms accessibility.
• Setting a fixed width like width=500, which breaks on devices of other sizes.
• Omitting the tag on pages that otherwise use media queries and wondering why the mobile styles never apply.
• Placing it outside the <head>.

Related

• Responsive design
• Media query
• Viewport units
• Mobile-first design

This page is general information written by our editorial team and updated when documentation changes. Servers and providers differ, so test changes safely first. See our editorial policy and disclaimer.