← Back to Chapters

HTML Viewport Meta Tag

? HTML Viewport Meta Tag

⚡ Quick Overview

The <meta name="viewport"> tag tells mobile browsers how to size and scale your page. Without it, phones emulate a large “virtual” desktop width and your layout looks tiny and zoomed out. The most common, safe value is:

? View Recommended Viewport Meta 
<meta name="viewport" content="width=device-width, initial-scale=1">

This makes the layout width equal to the device screen width and loads the page at a natural 100% zoom, which is the foundation of responsive design on mobile devices.

? Key Concepts

  • Placed in <head>: Browsers read it early, before layout.
  • width=device-width: Sets the layout viewport equal to the device width.
  • initial-scale=1: Loads the page at 100% zoom (no automatic zoom-out).
  • Zoom & accessibility: Avoid disabling zoom with user-scalable=no or tiny maximum-scale.
  • Responsive CSS still required: The meta tag enables proper scaling, but CSS (flex/grid, % widths) controls layout.
  • Advanced: viewport-fit=cover is useful for full-bleed layouts on devices with notches.

? Syntax & Theory

? View Basic Syntax 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My Responsive Page</title>
</head>
  • width=device-width – the page width matches the device screen width instead of a fake desktop-sized viewport (e.g., ~980px).
  • initial-scale=1 – initial zoom level. A value of 1 means “don’t zoom in or out” when loading.
  • Optional parameters:
    • maximum-scale – upper zoom limit (avoid restricting it unless absolutely necessary).
    • user-scalable – allows/disallows pinch zoom (don’t disable; it reduces accessibility).
    • viewport-fit=cover – lets content extend into the notch / safe-area region.

? Minimal Responsive Example

? View Code Example 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Responsive Page</title>
  <style>
    .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:10px; }
    .box  { background:#4caf50; color:#fff; text-align:center; padding:16px; border-radius:6px; }
  </style>
</head>
<body>
  <div class="grid">
    <div class="box">Box A</div>
    <div class="box">Box B</div>
    <div class="box">Box C</div>
  </div>
</body>
</html>

? Live Output & Viewport Stats

?️ Responsive Grid Preview

Below is a simple responsive grid similar to the example above. Resize the window to see how the boxes wrap.

Box A
Box B
Box C

? Viewport Measurements

CSS 100vw: – px
window.innerWidth: – px
visualViewport width: (n/a) px
? Rotate your device ? Resize the window

As you resize or rotate, these values update. With a correct viewport tag, they stay in sync with the real device width instead of an emulated desktop width.

? Tips & Best Practices

  • Always include the viewport meta tag on pages meant for mobile users.
  • Use width=device-width, initial-scale=1 as your default viewport settings.
  • Combine the viewport meta with responsive CSS (flex/grid, percentages, vw/vh/dvh).
  • Avoid disabling zoom (user-scalable=no or maximum-scale=1) — it harms accessibility.
  • Don’t ship multiple viewport tags; most browsers use only one and may ignore the rest.
  • On iOS, inputs with font-size < 16px may trigger zoom; keep base font size at 16px to avoid jumps.
  • For full-bleed layouts on notch phones, add viewport-fit=cover and use env(safe-area-inset-*) in your CSS.

? Try It Yourself

  • Remove the viewport meta tag from a demo page and open it on your phone. Compare it to the same page with the correct viewport meta.
  • Change the content to width=600 and see how it breaks on small and very large screens.
  • Add viewport-fit=cover and use padding: env(safe-area-inset-top) on a fixed header to handle devices with notches.
  • Create a full-height hero section using dvh instead of vh and observe how it behaves when the mobile browser UI (address bar) shows/hides.

? Summary

  • The viewport meta tag is essential for making pages look correct on mobile devices.
  • width=device-width, initial-scale=1 is the standard, accessible default.
  • The tag works together with responsive CSS; it does not replace good layout techniques.
  • Avoid disabling zoom or using fixed viewport widths — both hurt usability and accessibility.
  • Advanced options like viewport-fit=cover help polish experiences on modern phones with notches.