BITSPARK / Статьи / Заказ, договор и приёмка

Адаптивный сайт: что это и как проверить адаптив до приёмки

Коротко: по справке Яндекса, адаптивный сайт открывается по одному адресу и «подстраивается под разрешение и размер экрана». Отдельная мобильная версия получает свой адрес. Проверить адаптив заказчик может сам: по трём признакам из справки Яндекса, в режиме устройства в Chrome и в инструменте «Проверка мобильных страниц» Яндекс Вебмастера.

Кода в статье нет, кроме одной строки метатега; вёрстка адаптива не разбирается. Примеры вымышленные: интернет-магазин садовых инструментов на example.ru. Русские версии MDN и web.dev - переводы: страница MDN переведена сообществом, страница web.dev переведена автоматически, так сказано на самих страницах. Цитаты из них приведены по этим переводам. Справки Яндекса и Google открыты 05.10.2026.

Что такое адаптивный сайт?

Коротко: это сайт, который меняет макет под экран устройства. По справке Яндекса, он доступен по одному адресу для всех типов устройств. О смене макета пишут MDN и web.dev.

Справка Яндекса Сайты для мобильных устройств называет у такого сайта два свойства: он подстраивается под разрешение и размер экрана и доступен по одному URL для всех типов устройств. Дословная формулировка приведена в таблице следующего раздела.

URL - это адрес страницы. Для интернет-магазина из примера адрес одной страницы каталога, example.ru/catalog/, одинаков на телефоне, планшете и компьютере.

web.dev показывает, что значит «подстраивается»:

«Например, адаптивный сайт может отображать контент в одноколоночном режиме на телефоне, в двух колонках на планшете и в трех или четырех колонках на настольном компьютере.»

MDN описывает адаптивный дизайн как подход к проектированию, у которого нет отдельной технологии за спиной:

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

Для заказчика отсюда следует вопрос к подрядчику: чем именно сайт подстраивается под экран и как это проверяется. Способы проверки описаны в разделах о браузере и о Яндекс Вебмастере.

Какие способы сделать сайт для мобильных называют Яндекс и Google?

Коротко: у Яндекса три способа, у Google три. Названия и описания в таблице взяты со страниц-источников дословно и не сведены друг с другом.

Яндекс и Google описывают способы по-своему. Строки с Яндексом взяты со страницы Сайты для мобильных устройств, строки с Google - со страницы Рекомендации по индексированию с приоритетом мобильного контента.

Название способаКак описан на страницеИсточник
Сайт с адаптивным дизайном«Сайт подстраивается под разрешение и размер экрана; доступен по одному URL для всех типов устройств.»Яндекс
Сайт с динамической версткой страниц«Для просмотра с разных мобильных устройств сервер отправляет в ответ на запрос одного URL различные варианты кода HTML и CSS.»Яндекс
Мобильная версия сайта (поддомен)«Для просмотра с мобильных устройств используется отдельный URL (специальный поддомен: m.example.com, mob.example.com и пр.).»Яндекс
Адаптивный дизайн«Сервер отправляет один и тот же HTML-код всем устройствам (компьютерам, планшетам, мобильным телефонам, невизуальным браузерам), но отрисовка сайта выполняется по-разному в зависимости от размера экрана.»Google
Динамический показ«На разных устройствах открывается один и тот же URL. Для того чтобы показывать отдельные версии HTML-кода на разных устройствах, используется директива user-agent и заголовок HTTP-ответа Vary: user-agent.»Google
Разные URL«В зависимости от типа устройства выбираются разные варианты кода и разные URL. Система пытается определить тип устройства пользователя, а затем перенаправляет его на нужную страницу при помощи директивы user-agent и HTTP-заголовка Vary.»Google

Из трёх способов Google выделяет один:

«Google рекомендует использовать адаптивный дизайн, поскольку с ним проще всего работать.»

Яндекс перечисляет свои три способа в одном списке без пометки о предпочтении.

Чем адаптивный сайт отличается от отдельной мобильной версии?

Коротко: у адаптивного сайта один адрес, у мобильной версии на поддомене отдельный. О содержании двух версий говорят обе справки.

Отдельная мобильная версия по Яндексу - это «Мобильная версия сайта (поддомен)»: для просмотра с мобильных устройств используется отдельный URL, например m.example.ru вместо example.ru. Для такой версии справка Яндекса ставит условие:

«Чтобы в мобильном поиске участвовал мобильный поддомен, его структура должна полностью соответствовать структуре основного домена.»

MDN объясняет, что отдельные версии означали для владельца сайта:

«(...) компании желающие охватить мобильники начали создавать в основном специальные мобильные версии своих сайтов, с различными URL (...). Это означало, что необходимо было разрабатывать и поддерживать в актуальном состоянии две отдельные версии сайта.»

О содержании двух версий говорят обе справки. Яндекс: «содержание страниц мобильной версии сайта не должно кардинально отличаться от контента основной версии сайта». Google: «Мобильная версия сайта должна содержать те же материалы, что и его полная версия.» У адаптивного сайта, по тексту Google, «в мобильной и полной версиях используется одинаковый контент и метаданные».

Если версии не связаны между собой, Яндекс описывает последствие так:

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

Вопрос подрядчику, если он предлагает отдельную мобильную версию: как связаны версии и кто следит за совпадением содержания.

Что говорят о мобильных страницах Яндекс и Google?

Коротко: Яндекс называет три вида сайтов, которые мобильным пользователям «вероятнее всего будет показан». Google пишет, что при индексировании и ранжировании используется мобильная версия, и рекомендует адаптивный дизайн.

Справка Яндекса начинается с такого абзаца:

«Поисковые системы улучшают выдачу результатов поиска для пользователей мобильных устройств (смартфонов, планшетов). Таким пользователям вероятнее всего будет показан:»

После двоеточия идут три способа из таблицы способов. Яндекс говорит о вероятности показа.

Страница Google открывается так:

«При индексировании и ранжировании используется мобильная версия сайта, просканированная с помощью Googlebot для смартфонов. Это называется индексированием с приоритетом мобильного контента.»

Дальше Google уточняет, что мобильная версия не обязательна, и добавляет совет сделать её:

«Вам необязательно создавать мобильную версию сайта, чтобы ваш контент показывался в результатах поиска Google.»

Что такое метатег viewport и зачем он адаптивному сайту?

Коротко: viewport - строка в служебной части страницы, которая сообщает мобильному браузеру, какой ширины считать область просмотра. Яндекс называет её для сайтов с адаптивным дизайном.

В справке Яндекса сказано:

«Для сайтов с адаптивным дизайном используйте метатег (...), чтобы указать область просмотра контента.»

Строка из справки:

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

Справка Яндекса указывает место: «В элемент head», то есть в служебный раздел кода страницы. Заказчику писать эту строку не нужно. Достаточно спросить подрядчика, есть ли она на страницах.

web.dev объясняет, что происходит без неё:

«Страница без метатега viewport загружается в сильно уменьшенном масштабе, что затрудняет чтение текста.»

Русской версии страницы MDN о метатеге viewport нет, цитата дана по английской странице с переводом:

«Some mobile devices and other narrow screens render pages in a virtual window or viewport that is wider than the screen, and then shrink the rendered result down to fit the screen size.»

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

Какие признаки адаптива называет Яндекс?

Коротко: в справке Яндекса три признака, их можно сверить на экране телефона: содержимое не выходит за экран по горизонтали, страницы открываются без горизонтальной прокрутки на 320 пикселях и более, текст удобно читается.

В разделе «Общие рекомендации» справка Яндекса перечисляет три пункта о том, как содержимое страницы размещается на экране мобильного устройства:

  1. «Содержимое страниц не должно выходить за рамки экрана по горизонтали.»
  2. «Страницы сайта должны открываться корректно и без горизонтальной прокрутки на устройствах с разрешением 320 пикселей и более.»
  3. «Размер текста в пикселях должен быть таким, чтобы весь текст удобно читался на экране мобильного устройства.»

Для примера: заказчик открывает example.ru на телефоне. Если страницу приходится прокручивать вбок, это касается первого и второго признаков. По третьему справка даёт критерий словами «удобно читался». Чисел для размера текста она не называет, поэтому число для договора или замечания подрядчику из этой справки не взять.

Как проверить адаптив в браузере?

Коротко: web.dev описывает режим устройства в инструментах разработчика Chrome, который показывает страницу при разных контрольных точках, и называет два аудита Lighthouse. Шагов запуска Lighthouse на этой странице нет.

Контрольные точки MDN определяет так: «Точки, в которых применяются медиавыражения и меняется макет, известны как контрольные точки». Проще говоря, это ширины экрана, на которых макет перестраивается. web.dev пишет, как их увидеть в Chrome. Названия пунктов приведены из русской версии web.dev:

  1. Откройте инструменты разработчика.
  2. Включите режим устройства. web.dev добавляет: «По умолчанию он открывается в адаптивном режиме.»
  3. Чтобы увидеть медиа-запросы, откройте меню «Режим устройства» и выберите «Показать медиа-запросы». Контрольные точки отобразятся цветными полосами над страницей.
  4. Щёлкните по одной из полос, чтобы просмотреть страницу при этом медиа-запросе.

О Lighthouse web.dev пишет, что аудит Lighthouse «поможет автоматизировать процесс обнаружения содержимого, выходящего за пределы видимой области». О проверке метатега viewport с width или initial-scale в Lighthouse сказано, что она тоже помогает автоматизировать проверку. Как запускать Lighthouse, на странице не сказано, поэтому описания шагов здесь нет.

Как проверить мобильные страницы в Яндекс Вебмастере?

Коротко: в справке два пути: страница «Проверка мобильных страниц» для отдельной страницы и строка «Сайт не оптимизирован для мобильных устройств» для всего сайта.

Справка Яндекса «Сайты для мобильных устройств» в разделе «Как проверить мобильные страницы сайта» описывает два варианта.

Отдельная страница сайта:

  1. Перейдите на страницу «Проверка мобильных страниц».
  2. Выберите из списка сайт, страницу которого хотите проверить.
  3. В поле укажите URL страницы. По умолчанию указана главная страница сайта.
  4. Нажмите кнопку «Проверить». Справка: «Проверка длится несколько минут.»

Весь сайт:

  1. Перейдите на страницу «Все, что проверяет Яндекс Вебмастер».
  2. Выберите из списка сайт, страницу которого хотите проверить.
  3. В блоке «Рекомендации» найдите строку «Сайт не оптимизирован для мобильных устройств» и нажмите кнопку «Проверить». Справка: «Проверка завершится в течение двух недель.»

Во втором шаге справка просит выбрать сайт из списка, поэтому сайт должен быть в вашем списке сайтов в Вебмастере. После проверки рекомендации появятся на странице «Оптимизация сайта → Диагностика сайта».

Вторая справка, «Проблемы, связанные с оптимизацией сайта для мобильных устройств», объясняет сообщения диагностики. Одно из них:

«Многие страницы не оптимизированы для мобильных устройств.»

К нему в справке дано пояснение:

«Для признания сайта отпимизированным под мобильные устройства алгоритмами допускается определенный порог неоптимизированных страниц, который вычисляется динамически в зависимости от количества проиндексированных страниц вашего сайта.»

Число порога справка не называет. Решение по такому сообщению в справке: «внести правки на страницы из представленного в интерфейсе списка», затем проверить отдельные страницы в «Проверка мобильных страниц» и отправить сайт на повторную проверку.

Что проверить при приёмке сайта?

Коротко: шесть вопросов и действий, каждое из которых опирается на цитату из разделов этой статьи. Это перечень для разговора с подрядчиком.

Допустим, подрядчик сдаёт интернет-магазин садовых инструментов на example.ru. Перед приёмкой заказчик может пройти такой список:

  1. Узнать, какой способ выбран: адаптивный дизайн, динамическая верстка или мобильная версия на поддомене. Названия - из таблицы способов Яндекса и Google.
  2. Если выбрана мобильная версия на поддомене, спросить, совпадает ли содержание двух версий и как версии связаны между собой (раздел «Чем адаптивный сайт отличается от отдельной мобильной версии?»).
  3. Спросить, есть ли на страницах метатег viewport (раздел о метатеге viewport).
  4. Открыть главную страницу и страницы каталога example.ru на телефоне и сверить три признака Яндекса (раздел о признаках Яндекса).
  5. Пройти страницы в режиме устройства в Chrome по шагам web.dev (раздел о проверке в браузере).
  6. Для главной и нескольких страниц каталога запустить проверку на странице «Проверка мобильных страниц» в Яндекс Вебмастере (раздел о Яндекс Вебмастере).

На главной странице BITSPARK шаг процесса «Запуск» описан так: «Проверяем desktop и mobile, скорость, формы и ключевые сценарии - затем запускаем.» Скорость загрузки и формы в этой статье не разбираются. Другие материалы раздела собраны в списке статей.

Источники

Страницы открыты 05.10.2026.

Обсудить проект в Telegram: t.me/billioniks

Читайте по теме

Все статьи раздела «Заказ, договор и приёмка» →