Адаптивный сайт: как настроить viewport и медиазапросы и проверить результат
Адаптивный сайт меняет раскладку под ширину экрана: для этого нужны тег meta viewport в разделе head и медиазапросы в CSS, которые перестраивают колонки на телефоне. В конструкторах и темах CMS это обычно уже заложено в шаблон, а в своём коде адаптивность пишут вручную.
Ответ за 30 секунд
Сайт становится адаптивным за три шага: строка viewport в head, медиазапросы для колонок и проверка в режиме устройств. В конструкторах и CMS раскладка для телефона обычно уже входит в шаблон. В собственном коде её пишут вручную и проверяют на настоящем телефоне.
Статичный сайт на HTML и CSS работает на тарифе Year: 316 ₽ в месяц за год, бесплатный SSL и домен .RU в подарок при оплате на год (на 24 октября 2026).
Как проверить адаптивность сайта: режим устройств и настоящий телефон1 строкаviewport в разделе head
700 pxграница трёх колонок в примере
3 шагаviewport, медиазапросы, проверка
01 · 1 мин
Что значит адаптивный сайт и чем он отличается от мобильной версии#
Адаптивный сайт это один набор файлов, который сам подстраивает раскладку под ширину экрана: на компьютере три колонки, на телефоне одна. Мобильная версия устроена иначе. Это отдельный адрес вроде m.site.ru со своей вёрсткой, и поддерживать приходится два сайта.
Адаптивность нужна и поиску: Google индексирует сайты по их мобильной версии (режим mobile-first), поэтому страница должна быть полной и удобной именно на телефоне. Как это связано с продвижением, описано в материале продвижение сайта.
02 · 1 мин
Зачем в разделе head нужна строка viewport#
Без строки viewport мобильный браузер рисует страницу на виртуальном широком экране, часто около 980 пикселей, а потом уменьшает её до размера телефона. Текст становится мелким, и приходится увеличивать его пальцами. Строка в head сообщает, что ширина страницы равна ширине экрана:
<meta name="viewport" content="width=device-width, initial-scale=1.0">Строка одна, но без неё медиазапросы на телефоне не сработают так, как задумано: браузер считает экран широким. Описание тега есть в MDN Web Docs.
03 · 1 мин
Как писать медиазапросы: три колонки на компьютере, одна на телефоне#
Медиазапрос включает правила только при нужной ширине окна. Рабочий порядок такой: сначала стили для телефона, затем дополнения для широких экранов через min-width.
.cards {
display: grid;
gap: 16px;
grid-template-columns: 1fr;
}
@media (min-width: 700px) {
.cards { grid-template-columns: repeat(3, 1fr); }
}
img { max-width: 100%; height: auto; }Сетка из одной колонки работает по умолчанию, а от 700 пикселей включаются три колонки. Правило для img не даёт картинке выйти за экран. Проценты и max-width вместо жёстких width: 960px тоже работают на адаптивность. Границы между раскладками выбирают по содержимому: там, где макет начинает ломаться, а не по моделям телефонов.
Инструмент · 1 мин
Как проверить адаптивность сайта: режим устройств и настоящий телефон#
Откройте страницу в Chrome или Edge, нажмите F12 и включите режим устройств сочетанием Ctrl+Shift+M. Потяните границу окна и посмотрите, как раскладка перестраивается на ширине 360, 768 и 1280 пикселей. Затем откройте сайт на настоящем телефоне: касания и прокрутка ведут себя иначе, чем с мышью.
Проверка сайта на телефоне по шести пунктам
Отмечайте пройденное, подсказка покажет следующую проверку
05 · 1 мин
Что настраивать не придётся в конструкторе и CMS#
В конструкторах и темах CMS раскладка для телефона обычно заложена в шаблон: блоки перестраиваются сами, а вы проверяете результат в предпросмотре. Медиазапросы приходится писать только в своём коде или при глубокой правке темы.
Статичному адаптивному сайту не нужен сложный хостинг: подойдёт тариф Year за 316 ₽ в месяц при оплате за год (на 24 октября 2026) с бесплатным SSL. Куда загружать файлы, описано на странице хостинг для сайта, а общая схема раздела на странице сайт на коде.
06 · 1 мин
Вопросы про адаптивность сайта#
Как сделать сайт адаптивным, если он написан без медиазапросов?
Добавьте строку viewport в head, замените жёсткие ширины в пикселях на max-width и проценты, ограничьте картинки правилом max-width: 100% и допишите медиазапрос для колонок. Для простого сайта этого обычно хватает.
Какую ширину экрана брать для границы в медиазапросе?
Единого значения нет. Часто берут около 600-768 пикселей для планшета и 1024 для компьютера, но точнее ориентироваться на момент, когда макет начинает ломаться, и ставить границу именно там.
Влияет ли адаптивность сайта на поисковое продвижение?
Да, Google индексирует сайты по мобильной версии страницы, поэтому содержимое на телефоне должно быть полным. Раздел про поиск: что делать после запуска сайта.
Нужен ли отдельный сайт для телефонов, если основной не адаптивный?
Отдельная мобильная версия на другом адресе требует двойной поддержки, поэтому чаще переделывают раскладку и оставляют один адаптивный сайт. Основы вёрстки собраны на странице создать сайт на HTML.
Почему этому можно верить
Как мы проверяли
Источники цифр на этой странице: Конструктор сайтов Таймвеб, timeweb.com/ru/services/constructor, проверено 24 октября 2026; Виртуальный хостинг Таймвеб, timeweb.com/ru/services/hosting, проверено 24 октября 2026; Домены Таймвеб, timeweb.com/ru/services/domains, проверено 24 октября 2026; MDN Web Docs: Using media queries, developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries, проверено 24 октября 2026; MDN Web Docs: viewport meta tag, developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag, проверено 24 октября 2026; Google Search Central: mobile-first indexing, developers.google.com/search/docs/crawling-indexing/mobile/mobile-sites-mobile-first-indexing, проверено 24 октября 2026.
Разместите свой сайт
Для сайта на CMS или своём коде нужен хостинг. Виртуальный хостинг Таймвеб от 316 ₽ в месяц: NVMe, установка CMS в один клик, бесплатный SSL и домен .RU в подарок.
- Тарифы от 316 ₽ в месяц
- Популярные CMS в один клик
- Бесплатный SSL и домен .RU в подарок
- Бесплатный перенос и 10 дней теста