Viewport Meta Tag Generator
Generate the correct viewport meta tag for mobile-responsive websites
Configure Tags
0/60 characters
0/160 characters
Generated Code
<meta name="robots" content="index, follow"> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary_large_image"> <meta name="theme-color" content="#000000"> <meta name="viewport" content="width=device-width, initial-scale=1">
💡 Tip: Copy these tags and paste them inside the <head> section of your HTML document.
Other Meta Tag Generators
About Viewport Meta Tag Generator
The viewport meta tag is one of the most fundamental HTML tags for mobile web development. Without it, mobile browsers render pages as if they were desktop screens and then scale them down to fit — producing tiny, unreadable text and forcing users to pinch-zoom. With the correct viewport tag, mobile browsers render your page at the appropriate mobile width, enabling CSS media queries to work correctly and delivering the mobile experience your responsive design intends.
Google uses mobile-first indexing — it crawls and indexes the mobile version of your site and uses that for ranking. A missing or incorrect viewport meta tag signals to Google that your page isn't mobile-friendly, which can directly impact search rankings. Google Search Console reports missing viewport tags as a mobile usability issue.
Despite its importance, the viewport meta tag is frequently misconfigured. Common mistakes include hardcoding a fixed pixel width, setting user-scalable=no which harms accessibility, and using incorrect initial-scale values. The viewport meta tag generator produces correctly configured tags and explains the implications of each parameter.
How the Viewport Meta Tag Works
The viewport meta tag controls the visible area of a web page in a browser window. On mobile devices, browsers have a virtual viewport that defaults to 980px wide regardless of the physical screen size. Without intervention, an iPhone renders your page as if it were 980px wide and scales it down — making everything tiny.
The viewport meta tag's most critical value is width=device-width, which instructs the browser to set the viewport width to the actual device screen width. Combined with initial-scale=1, this establishes a 1:1 correspondence between CSS pixels and device pixels, enabling your responsive CSS and media queries to function as designed.
The user-scalable parameter deserves careful consideration. Setting user-scalable=no prevents users from pinching to zoom — this is an accessibility violation that harms users with low vision and is flagged as a failure by accessibility auditing tools. Google also counts user-scalable=no as a mobile usability issue in Search Console.
Key Considerations
width=device-width is Essential
Without width=device-width, mobile browsers use a virtual 980px viewport and scale your page down to fit, making text tiny and navigation impossible without zooming. This single parameter enables your responsive CSS to work correctly at actual screen dimensions.
Never Set user-scalable=no
Disabling user zoom is an accessibility violation that prevents users with low vision from reading content. It's flagged as a mobile usability issue in Google Search Console and fails WCAG 2.1. There are almost no legitimate reasons to disable zooming on a standard website.
initial-scale=1 for Correct Rendering
initial-scale=1 sets the initial zoom level to 1.0. Combined with width=device-width, this establishes correct baseline rendering. Without it, some browsers may render at a slightly different zoom level on first load. Always pair width=device-width with initial-scale=1.
iOS Input Zoom Issue
iOS Safari automatically zooms when a user focuses on an input field with font-size smaller than 16px. The correct fix is CSS (font-size: 16px on inputs), not modifying the viewport. Setting maximum-scale=1 to prevent this zoom disables all zooming for all users — an accessibility violation.
Common Viewport Tag Issues
Missing or Wrong Tag
- •No viewport meta tag — mobile browsers use 980px virtual viewport
- •width set to a fixed pixel value instead of device-width
- •Viewport tag placed in body instead of head — ignored by browsers
- •Duplicate viewport tags with conflicting values
Accessibility Violations
- •user-scalable=no disabling pinch-to-zoom for users with low vision
- •maximum-scale=1 preventing zooming — equivalent accessibility violation
- •Fixed viewport width preventing content from adapting to device width
iOS-Specific Issues
- •iOS input zoom triggered by form fields with font-size under 16px
- •100vh not accounting for Safari's collapsible address bar
- •Safe area insets for notch or Dynamic Island not considered in layout
Implementation Guide
Correct Viewport Meta Tag
The standard viewport configuration for responsive websites:
<head>
<!-- Standard responsive viewport — use this for all responsive sites -->
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Wrong — fixed width doesn't adapt to device -->
<!-- <meta name="viewport" content="width=320" /> -->
<!-- Wrong — disables accessibility zooming -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> -->
<!-- Wrong — prevents zooming, accessibility violation -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> -->
<!-- For PWAs and full-screen app experiences only -->
<!-- <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> -->
</head>Next.js 15 Viewport Configuration
Configure the viewport meta tag using Next.js dedicated viewport export:
// app/layout.tsx
import type { Viewport } from "next";
// Viewport is separate from Metadata in Next.js 14+
export const viewport: Viewport = {
width: "device-width",
initialScale: 1,
// themeColor: "#ffffff",
// colorScheme: "light dark",
};
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}Fix iOS Input Zoom Without Breaking Accessibility
Prevent iOS auto-zoom on input focus using CSS instead of viewport restrictions:
/* Fix iOS auto-zoom — CSS approach (correct) */
/* iOS Safari zooms when input font-size is under 16px */
input, select, textarea {
font-size: 16px; /* Minimum 16px prevents iOS zoom */
}
/* Safe area insets for iPhone notch / Dynamic Island */
.container {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
/* Use dvh instead of vh to account for Safari address bar */
.full-height {
height: 100dvh; /* Dynamic viewport height */
}Common Use Cases
- Adding the viewport tag to a new website before launch
- Fixing mobile usability issues flagged in Google Search Console
- Auditing legacy sites that predate responsive design
- Configuring viewport for PWA and full-screen web app experiences
- Removing accessibility-violating user-scalable=no configurations
Pro Tip
After adding or updating your viewport tag, run Google's Mobile-Friendly Test (search.google.com/test/mobile-friendly). It specifically checks viewport configuration as part of mobile-friendliness assessment. A passing result is a prerequisite for mobile search ranking and confirms your viewport tag is correctly configured.