Как сделать сайт адаптивным: 10 исправлений, которые действительно важны

Десять изменений, которые адаптируют сайт под мобильные устройства: от метатега viewport и резиновой раскладки до зон нажатия, форм и размеров изображений. С готовым кодом.

Чтобы адаптировать сайт под мобильные устройства, добавьте правильный метатег viewport, сделайте раскладку резиновой вместо фиксированной ширины в пикселях, перестраивайте контент на маленьких экранах медиазапросами, сделайте текст читаемым, а кнопки удобными для нажатия, и отдавайте изображения подходящего для телефонов размера. Затем проверьте результат в мобильном просмотре. Десять исправлений ниже покрывают то, что почти каждый неадаптивный сайт делает неправильно, в том порядке, в котором за них стоит браться.

1. Добавьте метатег viewport

Без него телефон считает, что страница сделана для десктопа, отрисовывает её шириной около 980 px и потом уменьшает. Текст становится крошечным, и пользователю приходится увеличивать страницу пальцами. Добавьте в <head> каждой страницы:

<meta name="viewport" content="width=device-width, initial-scale=1">

Не добавляйте user-scalable=no или maximum-scale=1: запрет масштабирования мешает людям, которым нужен крупный текст. Подробнее: метатег viewport.

2. Замените фиксированную ширину на резиновую

Контейнер width: 960px не поместится на экране шириной 390 px. Используйте проценты, max-width и современные инструменты раскладки:

.container {
  width: min(100% - 2rem, 72rem);
  margin-inline: auto;
}

Flexbox с flex-wrap: wrap и CSS Grid с repeat(auto-fit, minmax(16rem, 1fr)) переносят колонки сами, часто вообще без медиазапросов.

3. Сделайте так, чтобы картинки и встраиваемый контент сжимались

img, video, iframe {
  max-width: 100%;
  height: auto;
}

Для встроенных видео и карт задайте aspect-ratio: 16 / 9; width: 100%, чтобы они масштабировались, не ломая раскладку. Одно это правило убирает многие случаи горизонтальной прокрутки.

4. Перестраивайте контент медиазапросами

Некоторые раскладки нужно не просто сжать, а изменить: сайдбар уходит под контент, футер из четырёх колонок становится одной колонкой. Сначала пишите мобильную раскладку, а для широких экранов добавляйте сложность:

.layout { display: grid; gap: 2rem; }

@media (min-width: 64rem) {
  .layout { grid-template-columns: 3fr 1fr; }
}

Как выбирать ширины, рассказано в статье о брейкпоинтах для адаптивной вёрстки, синтаксис — в руководстве по медиазапросам CSS. Сам подход mobile first объясняется в статье о mobile first.

5. Используйте читаемый шрифт

Задайте основному тексту размер не меньше 16 px (1rem в большинстве браузеров) и межстрочный интервал около 1,5. Используйте единицы rem, чтобы текст учитывал настройку шрифта в браузере пользователя. На больших экранах держите комфортную длину строки с помощью max-width: 65ch для текстовых блоков. Заголовки можно масштабировать под экран через clamp():

h1 { font-size: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); }

6. Сделайте зоны нажатия крупными и с отступами

Палец менее точен, чем курсор мыши. WCAG 2.2 устанавливает минимальный размер цели 24 × 24 CSS-пикселя, а гайдлайны Apple и Google рекомендуют около 44–48 px для комфортного нажатия. Дайте ссылкам в тексте и кнопкам-иконкам достаточные внутренние отступы и расстояние до соседних элементов.

7. Сделайте навигацию, которая работает без наведения

На сенсорных экранах наведения нет. На маленьких экранах используйте кнопку меню, которая открывает список по тапу, держите пунктов верхнего уровня немного и убедитесь, что вложенные пункты раскрываются и тапом, и с клавиатуры. Проверьте, что меню закрывается после выбора ссылки.

8. Адаптируйте формы под телефоны

Используйте правильные типы полей (email, tel, url, number) и inputmode, чтобы телефон показывал подходящую клавиатуру.
Добавьте атрибуты autocomplete (name, email, street-address, cc-number), чтобы работало автозаполнение.
Делайте текст в полях не меньше 16 px: iOS Safari увеличивает масштаб при фокусе на полях с более мелким шрифтом.
На узких экранах ставьте подписи над полями, а кнопку отправки растягивайте на всю ширину.

9. Отдавайте изображения мобильного размера

Главная картинка шириной 2400 px — это тяжёлая загрузка для телефона. Используйте адаптивные изображения, чтобы браузер сам выбрал подходящий файл:

<img src="hero-800.jpg"
     srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1600.jpg 1600w"
     sizes="(min-width: 64rem) 50vw, 100vw"
     alt="Дашборд продукта на телефоне">

Современные форматы WebP и AVIF ещё сильнее уменьшают вес файлов. Изображениям ниже первого экрана добавьте loading="lazy". Об ускорении страниц читайте в статье проверка скорости сайта на мобильных.

10. Уберите то, что раздражает на мобильных

Полноэкранные попапы сразу при входе, чат-виджет поверх кнопки «Купить» и липкие панели на четверть экрана делают сайт на телефоне враждебным. Показывайте попапы с задержкой, делайте их легко закрываемыми и держите липкие элементы компактными.

Как проверить результат

После каждого изменения смотрите на страницу в размере телефона. Быстрый способ — мобильный просмотр в десктопном Chrome: режим устройства в DevTools или расширение Mobile View Extension, которое в один клик перезагружает вкладку с настоящим мобильным user agent и позволяет сравнить размеры устройств. Затем запустите аудит Lighthouse для мобильных, а перед запуском пройдите чек-лист тестирования мобильной версии сайта. Инструменты, которые заменяют старую проверку Google в один клик, перечислены в статье чем заменить Mobile-Friendly Test.

Сайт на WordPress? Принципы те же, но большая часть исправлений делается в теме. Смотрите статью мобильная версия сайта на WordPress.

Частые вопросы

Как быстрее всего адаптировать старый сайт под мобильные?

Добавьте метатег viewport, задайте max-width: 100% для изображений и встраиваемого контента, уберите фиксированную ширину у основных контейнеров и поставьте колонки друг под другом одним медиазапросом. Так за полдня исправляется большая часть горизонтальной прокрутки и мелкого текста.

Нужна ли отдельная мобильная версия сайта?

Нет. Один адаптивный сайт, который подстраивается под экран, проще поддерживать, и именно его рекомендует Google. Отдельные сайты на поддомене m. — устаревший подход.

Как понять, адаптирован ли мой сайт под мобильные?

Посмотрите на него в размере телефона, запустите аудит Lighthouse в мобильном режиме и проверьте скриншот в инструменте проверки URL в Google Search Console. Вместе они заменяют закрытый Google Mobile-Friendly Test.