Как сделать сайт адаптивным — пошагово, начиная с одной строки, о которой все забывают
Сайт на ноуте выглядит отлично, открываешь на телефоне — а там всё крошечное, надо щипать пальцами, чтобы прочитать. И вот что многие не знают: это не «надо переписать весь дизайн». В девяти случаях из десяти виновата одна забытая строка в шапке страницы. С неё и начнём.
А ещё момент, который повышает ставки: Google индексирует сайты по их мобильной версии (это называется mobile-first indexing) — даже когда человек ищет с компьютера. То есть «на телефоне криво» — это не косметика. Это то, что Google считает твоим сайтом. Погнали чинить, по шагам.
Шаг 1. Добавь тег viewport — та самая строка
Без этой строки телефон думает, что показывает «настольный» сайт, и тупо ужимает всю страницу до размеров экрана — отсюда и микроскопический текст. Открой index.html и в <head> добавь:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Это говорит браузеру: «верстай по реальной ширине экрана, не масштабируй». Часто этого одного достаточно, чтобы сайт из «крошечного» стал нормальным. Если собирал через no-code сборку или на React — тег обычно уже на месте, но проверь.
Шаг 2. Замени жёсткие пиксели на гибкие единицы
Вторая частая беда — блоки заданы в фиксированных пикселях: width: 1200px. На экране шириной 390px такой блок вылезает за край, и появляется горизонтальная прокрутка. Лечится заменой на относительные значения:
width: 100%вместоwidth: 1200px— блок занимает доступную ширину, а не требует своей.max-width: 600px— ограничивает блок на больших экранах, но даёт ему сжаться на маленьких.- Отступы и шрифты — в
rem/%, а не в фиксированныхpx, где это уместно.
Проще всего попросить ИИ-редактор: «найди в CSS фиксированные ширины в пикселях и сделай блоки гибкими, чтобы не было горизонтальной прокрутки на мобильном».
Шаг 3. Добавь медиа-запросы под узкий экран
Медиа-запрос — это «если экран уже такого-то, примени вот эти стили». Им меняют то, что на телефоне должно выглядеть иначе: например, две колонки складывают в одну.
@media (max-width: 600px) {
.columns { flex-direction: column; }
.menu { display: none; }
}
Правило: верстай сначала под мобильный (mobile-first), а медиа-запросами добавляй «украшения» для широких экранов. Так меньше шансов забыть про телефон — ведь именно его видит Google.
Шаг 4. Сделай кнопки и ссылки нажимаемыми пальцем
На мышке попасть в крошечную ссылку легко, пальцем — нет. Делай кликабельные элементы не меньше примерно 44×44 точек и с воздухом между ними, чтобы не промахиваться. Заодно проверь, что текст читается без зума — основной шрифт от 16px.
Шаг 5. Проверь результат по-настоящему
Не верь на глаз — проверь:
- В браузере открой DevTools (F12) → значок телефона/планшета вверху → выбери модель (например, iPhone). Страница покажется как на телефоне.
- Покрути её: нет ли горизонтальной прокрутки, не вылезает ли что-то за край.
- Прогони сайт через Google Mobile-Friendly Test или PageSpeed Insights — там Google прямо скажет, что ему не нравится на мобильном.
Что получится: сайт, который сам перестраивается под любой экран — и для человека с телефона, и для поискового робота, который теперь видит аккуратную мобильную версию.
Когда мобильная версия в порядке, есть смысл вернуться к SEO и мета-тегам — адаптивность и скорость работают на позиции в паре.
Достаточно ли одного тега viewport?
Часто он решает главную проблему — микроскопический текст. Но если в вёрстке остались фиксированные ширины в пикселях, появится горизонтальная прокрутка, и тег её не уберёт. viewport — обязательный первый шаг, а не единственный.
React/готовый шаблон — там уже всё адаптивно?
Обычно стартовые шаблоны и UI-библиотеки адаптивны из коробки, и тег viewport на месте. Но как только ты добавляешь свою вёрстку с жёсткими пикселями, адаптивность ломается локально. Так что проверять в DevTools всё равно нужно — независимо от того, React это или чистый HTML.
Чем «адаптивный» отличается от «мобильной версии сайта»?
Адаптивный — это один сайт, который перестраивается под ширину экрана. Отдельная «мобильная версия» — это второй сайт (часто m.сайт.ру), который надо поддерживать параллельно. Сегодня почти всегда выбирают адаптивность: один код, одна ссылка, и Google это любит больше.
Короткие уроки-истории, симулятор агента и ежедневная практика — в нашем мобильном приложении. Бесплатно.
Читайте дальше
Ошибка 500 — что значит и как чинить: 3 причины, с которых начать
Как пользоваться Git новичку — пошагово, и почему это машина времени для кода
Ошибка CORS — что делать: 3 причины и как починить каждую
Как чинить баги вместе с ИИ — 5 шагов, чтобы он помог, а не угадывал
Как купить домен и привязать к сайту — по шагам, и почему он «не открывается» сразу
