Meta Viewport Tag Explained
How the viewport meta tag works, the correct syntax to use, common mistakes to avoid, and why it matters for mobile SEO.
What Does the Viewport Meta Tag Do?
The viewport meta tag controls how a web page is displayed on mobile devices. Without it, mobile browsers render the page at a desktop width (typically 980px) and then shrink it down to fit the screen — making text tiny and unreadable.
With the correct viewport tag, the browser sets the page width to the device's screen width, enabling proper responsive behavior with CSS media queries.
<meta name="viewport" content="width=device-width, initial-scale=1">This single line goes inside the <head> section of every page. It is required for any responsive website.
Syntax and Values
The content attribute accepts a comma-separated list of key-value pairs:
| Property | Values | What It Does |
|---|---|---|
width | device-width or a pixel value | Sets the width of the viewport. device-width matches the screen width. |
height | device-height or a pixel value | Sets the height of the viewport. Rarely needed. |
initial-scale | 0.1 to 10 | Sets the initial zoom level when the page loads. 1 means no zoom. |
minimum-scale | 0.1 to 10 | Sets the minimum zoom level the user can reach. |
maximum-scale | 0.1 to 10 | Sets the maximum zoom level. Restricting this hurts accessibility. |
user-scalable | yes or no | Controls whether the user can zoom. Setting to no is an accessibility violation. |
interactive-widget | resizes-visual, resizes-content, overlays-content | Controls viewport behavior when the virtual keyboard opens (modern browsers). |
Why It Matters for Mobile and SEO
Mobile Rendering
- Without the viewport tag, mobile browsers render at ~980px width and scale down
- Text becomes unreadable, tap targets too small
- CSS media queries for responsive design won't trigger correctly
- Users must pinch-to-zoom to read anything
Google's Mobile-First Indexing
- Google uses mobile-first indexing for all websites
- Missing viewport tag means your page fails mobile usability checks
- Mobile-unfriendly pages rank lower in mobile search results
- Lighthouse and PageSpeed Insights flag missing viewport as an error
Correct Usage
For the vast majority of websites, this is the only viewport tag you need:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Your Page Title</title>
</head>This sets the viewport width to match the device screen and starts at 1x zoom. Users can still pinch-to-zoom, which is important for accessibility.
Common Mistakes
Disabling user zoom
Setting maximum-scale=1 or user-scalable=no prevents users from zooming. This is an accessibility violation (WCAG 1.4.4) and hurts users with low vision.
<!-- Bad: prevents zooming -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><!-- Good: users can zoom freely -->
<meta name="viewport" content="width=device-width, initial-scale=1">Missing the viewport tag entirely
Without any viewport tag, mobile browsers default to a ~980px wide viewport. Your responsive CSS breakpoints won't work, and the page appears as a tiny desktop version on mobile.
This is one of the most common issues flagged by Lighthouse and Google's Mobile-Friendly Test.
Setting a fixed pixel width
Using a hardcoded width instead of device-widthbreaks responsiveness on devices that don't match that exact width.
<!-- Bad: only works on one screen width -->
<meta name="viewport" content="width=1024">Multiple viewport tags
Having more than one <meta name="viewport"> tag causes unpredictable behavior. Browsers typically use the last one, but results vary. Always have exactly one viewport tag.
Using CSS @viewport instead
The CSS @viewport rule was an experimental specification that has been abandoned. It is not supported by modern browsers. Always use the HTML meta tag.
Viewport and Mobile-First Indexing
Since July 2019, Google uses mobile-first indexing for all new websites. Since March 2021, it applies to all websites. This means Google primarily uses the mobile version of your page for indexing and ranking.
The viewport meta tag is a key signal Google uses to determine if a page is mobile-friendly:
- 1.Pages without a viewport tag are flagged as "not mobile-friendly" in Search Console.
- 2.Lighthouse scores it as a "critical issue" when the viewport tag is missing.
- 3.Pages that disable zoom may trigger "accessibility issue" flags in Google's mobile usability report.
- 4.Mobile-unfriendly pages are demoted in mobile search results (which account for over 60% of searches).
Complete HTML Head Example
Here's a well-structured <head> section with the viewport tag in its correct position:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Your page description">
<meta name="robots" content="index, follow">
<!-- Open Graph -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your page description">
<meta property="og:type" content="website">
<title>Your Page Title</title>
<link rel="canonical" href="https://example.com/page">
<link rel="stylesheet" href="/styles.css">
</head>Check Your Meta Tags
Verify your viewport tag, meta descriptions, and Open Graph tags in one click.
Semrush — All-in-One SEO Toolkit
Audit your mobile SEO, viewport issues, and Core Web Vitals across your entire site.