Document Resources

Meta Viewport

Make Layout Match the Device

A small page adds viewport metadata before rendering a responsive lesson card in the body.

Program

Not every important HTML element paints pixels directly. Head metadata can change how the browser interprets the visible body.

meta_viewport.html
Visuals: captured from real browser rendering
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <main class="lesson-card">Responsive lesson card</main>
</body>

  1. Open the document metadata area.

    The viewport is still using browser defaults.
    The head holds metadata that can affect rendering before body content appears.

  2. Declare viewport metadata.

    A viewport metadata row appears in the browser state.
    The name identifies this meta element as viewport configuration.

  3. Set width and initial scale.

    The layout state shows device width and initial scale 1.
    The content value changes layout behavior even though the tag itself is invisible.

  4. Render the responsive lesson card.

    A responsive lesson card appears inside the page body.
    The body content now uses the viewport metadata already parsed in the head.

  5. Complete the visible document body.

    The responsive lesson card remains in the final body.
    Closing the body finalizes the visible content while head metadata stays active.
viewport The viewport meta tag controls the layout viewport used by mobile browsers.
initial scale initial-scale=1 asks the browser to start at a normal zoom level.