Meta Viewport

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

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <main class="lesson-card">Responsive lesson card</main>
</body>

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.