Как добавить meta viewport для мобильных

Короткий ответ

Добавьте в <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>

Что делает этот тег

Без него мобильный браузер считает, что страница сделана для компьютера, рисует её шириной около 980 пикселей и уменьшает до размеров экрана. Текст становится мелким, а медиазапросы вида max-width: 600px не срабатывают — ведь «экран» широкий.

width=device-width говорит: ширина страницы равна ширине экрана устройства. initial-scale=1 — открывать без увеличения и уменьшения.

Где проверить

В инструментах разработчика браузера (F12) включите режим устройства — значок телефона. Сравните страницу с тегом и без него: разница видна сразу.

Частая ошибка

В тег дописывают maximum-scale=1 или user-scalable=no, чтобы страница «не дёргалась». Пользователь больше не может увеличить мелкий текст двумя пальцами, а для людей со слабым зрением это важно. Масштабирование не запрещайте — достаточно значения из короткого ответа.