×

html · level 3 · unit 3 · lesson 2

  1. meet it
  2. guess first
  3. your turn
  4. fix it
  5. nailed it

Tap a green word if you get lost.

meet it

The viewport tag tells phones to show the page at their own width.

Long ago, websites were built for wide computer screens. So phones still pretend to be about 980 pixels wide, unless told otherwise, and shrink the whole page until the words are too small to read.

<meta name="viewport" content="width=device-width, initial-scale=1"> fixes that. It tells the browser to make the viewport as wide as the , whether that is a phone, a tablet or a laptop, and to start at normal size.

Never add user-scalable=no or maximum-scale=1. They stop people from making the page bigger, and many people need to to read.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Wag and Walk</title>
  </head>
  <body>
    <h1>Wag and Walk</h1>
    <p>Dog walks that fit around your day.</p>
  </body>
</html>

Press show my page to see it here.

name says which fact a <meta> holds, and content holds the fact itself.