How to add the viewport meta tag for mobile

Short answer

Add one line to <head>:

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<p>Without this tag a phone shows a shrunken desktop page.</p>

What the tag does

Without it a mobile browser assumes the page is made for a computer, renders it about 980 pixels wide and shrinks it to the screen. The text gets tiny, and media queries such as max-width: 600px do not fire — the "screen" is wide after all.

width=device-width says: the page width equals the device screen width. initial-scale=1 means opening without zooming in or out.

Where to check

In the browser developer tools (F12), turn on device mode — the phone icon. Compare the page with and without the tag: the difference is obvious.

Common mistake

maximum-scale=1 or user-scalable=no is added to the tag so that the page "does not jump". The user can no longer enlarge small text with two fingers, which matters for people with low vision. Do not disable zooming — the value from the short answer is enough.