Viewport Meta Tag

The viewport meta tag is essential for responsive design—it tells the browser how to render the page on different devices. Without it, mobile browsers assume desktop dimensions, making pages too wide and unreadable. The correct viewport tag ensures proper scaling, zoom behavior, and responsive layout rendering.

What is the viewport meta tag?

HTML

<!-- Essential viewport meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Placed in <head> -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Page Title</title>
</head>
<body>
  <!-- content -->
</body>
</html>

<!-- What it does: -->
<!-- width=device-width: set viewport width to device width -->
<!-- initial-scale=1.0: set initial zoom to 100% -->
<!-- Tells mobile browsers to render at device width, not desktop width -->

<!-- Without viewport tag: -->
<!-- Mobile browser renders at ~980px (desktop width) -->
<!-- Page appears zoomed out and small -->

<!-- With viewport tag: -->
<!-- Mobile browser renders at actual device width (375px, 768px, etc) -->
<!-- Page scales properly and is readable -->

Viewport attributes explained

Attribute	Purpose	Example
width	Set viewport width	width=device-width
initial-scale	Initial zoom level	initial-scale=1.0
maximum-scale	Max zoom allowed	maximum-scale=5.0
minimum-scale	Min zoom allowed	minimum-scale=0.5
user-scalable	Allow user zoom	user-scalable=yes

HTML

<!-- Standard viewport (most common) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Allows user zoom -->
<!-- Good for accessibility: users can zoom if needed -->

<!-- Prevent zoom: NOT RECOMMENDED -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<!-- Disables user zoom: bad for accessibility -->
<!-- Can prevent pinch-to-zoom on mobile -->
<!-- AVOID THIS UNLESS NECESSARY -->

<!-- Allow zoom for accessibility -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, maximum-scale=5.0">

<!-- Users can zoom up to 5x -->
<!-- Good for accessibility -->

<!-- Prevent zoom on iOS specifically -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

<!-- viewport-fit: cover for notch support -->
<!-- Extends content to full screen including notch area -->

<!-- Separate max-scale and user-scalable -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

<!-- Strict scaling: 1:1 with device -->
<!-- Effectively prevents zoom -->
<!-- Use with care -->

Why viewport meta tag matters

HTML

<!-- Problem: Without viewport tag -->
<html>
<head>
  <!-- NO viewport tag -->
  <style>
    body { font-size: 16px; }
    .container { width: 100%; }
  </style>
</head>
<body>
  <div class="container">Content</div>
</body>
</html>

<!-- What happens: -->
<!-- 1. Mobile browser assumes desktop viewport (~980px) -->
<!-- 2. Page renders at desktop width -->
<!-- 3. Content appears zoomed out on mobile -->
<!-- 4. Text too small, can't read without pinch-zoom -->
<!-- 5. Responsive CSS doesn't work properly -->

<!-- Solution: Add viewport meta tag -->
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body { font-size: 16px; }
    .container { width: 100%; }
  </style>
</head>
<body>
  <div class="container">Content</div>
</body>
</html>

<!-- What happens: -->
<!-- 1. Browser knows device actual width (375px, 768px, etc) -->
<!-- 2. Page renders at device width -->
<!-- 3. Content readable at 100% zoom -->
<!-- 4. Responsive CSS works correctly -->
<!-- 5. Media queries trigger at right breakpoints -->

<!-- Result: Perfect responsive behavior -->

Viewport tag best practices

Practice	Do This	Why
Always include	In every HTML page	Essential for responsive
Place in <head>	Before CSS/JS	Browser needs early
Allow zoom	user-scalable=yes	Accessibility
Set initial-scale	initial-scale=1.0	Prevents auto-zoom
No max-scale=1	Allow up to 5x zoom	Accessible zoom

HTML

<!-- Recommended modern viewport tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Simple, clean, accessible -->
<!-- Works on all devices and browsers -->

<!-- For notch support (iPhone X+) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

<!-- Extends content behind notch -->
<!-- Use safe-area-inset CSS properties -->

<!-- Additional meta tags for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#3498db">
<!-- Theme color for browser UI -->

<meta name="description" content="Page description">
<!-- For SEO and social sharing -->

<!-- Complete mobile meta tag setup -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description">
<meta name="theme-color" content="#3498db">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

<!-- Comprehensive mobile support -->

Troubleshooting viewport issues

HTML

<!-- Problem: Page appears zoomed out on mobile -->
<!-- Solution: Check for viewport meta tag -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- Problem: Text too small to read -->
<!-- Solution: Ensure font-size is readable (16px+) -->
<!-- And viewport tag is correct -->

<!-- Problem: Elements overflow on mobile -->
<!-- Solution: Check max-width: 100% on elements -->
<style>
  img, video {
    max-width: 100%;
    height: auto;
  }
</style>

<!-- Problem: Media queries not triggering -->
<!-- Solution: Check viewport tag exists and is correct -->
<!-- Verify media query breakpoints are right -->

<!-- Problem: iOS Safari zooms in on form input -->
<!-- Solution: Ensure font-size is 16px+ on input -->
<input type="text" style="font-size: 16px;">
<!-- iOS won't auto-zoom with 16px+ font -->

<!-- Problem: Notch overlaps content on iPhone X+ -->
<!-- Solution: Use viewport-fit=cover and safe-area insets -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

<style>
  body {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
</style>

<!-- Content avoids notch area -->

Warning

Never use `user-scalable=no` or `maximum-scale=1` unless absolutely necessary. Disabling user zoom makes content inaccessible for users with vision disabilities who need to zoom. Always allow zooming—it's an accessibility requirement.

Note

The viewport meta tag is essential for responsive design. Use `width=device-width, initial-scale=1.0` in every HTML page. It tells mobile browsers to render at actual device width rather than assuming desktop width (980px). Without it, responsive CSS and media queries don't work properly on mobile. Always place it in `<head>` before other resources.

Responsive images: [Responsive Images](/css/responsive-images).