Проверка адаптивности сайта на разных экранах

Вставьте адрес: откроем главную на семи популярных экранах, от телевизора 4K до самого узкого телефона, покажем снимки и найдём, где вёрстка ломается.

Коротко: что такое адаптивный сайт

Адаптивный сайт перестраивается под ширину экрана: на телефоне не листается вбок, кнопки достаточно крупные для пальца (от 24 px по стандарту WCAG 2.2), текст читается без увеличения. Больше половины посещений сегодня идёт с телефонов, а Google оценивает сайт по мобильной версии, поэтому ошибки вёрстки на телефоне стоят и клиентов, и позиций в поиске.

Какие экраны мы проверяем и почему

  • Телевизор 4K · 3840×2160Самый большой экран: видно, не растягивается ли сайт на всю ширину и не теряется ли текст.
  • Большой монитор · 2560×1440Популярные мониторы 27 дюймов у дизайнеров и офисов.
  • Компьютер Full HD · 1920×1080Самое частое разрешение компьютеров в мире.
  • Ноутбук · 1366×768Недорогие ноутбуки: вторые по частоте, места по высоте мало.
  • Планшет · 768×1024iPad и Android-планшеты в вертикальном положении, сенсорный экран.
  • Телефон · 390×844Современные iPhone и большинство Android по ширине.
  • Маленький телефон · 320×568Самый узкий экран, который ещё встречается: здесь вёрстка ломается первой.

Частые вопросы об адаптивности сайта

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

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

Почему сайт на телефоне листается вбок?

Чаще всего виноваты картинка, таблица или блок с фиксированной шириной больше экрана, длинное слово или ссылка без переносов, либо элемент с отрицательным отступом. В отчёте видно, на сколько точек страница шире экрана.

Какой размер кнопки нужен для телефона?

Стандарт доступности WCAG 2.2 требует не меньше 24 на 24 px, а Apple и Google советуют 44 и 48 px. Мелкие ссылки рядом друг с другом ведут к промахам и уходу с сайта.

Влияет ли адаптивность на позиции в Google и Яндексе?

Да. Google индексирует сайт по мобильной версии, а неудобная вёрстка на телефоне ухудшает поведенческие сигналы и в Яндексе.

Можно ли следить за вёрсткой автоматически?

Да, в Awe Check Pro: сайт проверяется по расписанию, и если после обновления темы или плагина вёрстка поехала, придёт сигнал в Telegram или на почту.

Что проверить дальше

  • Проверка на мошенничество

    Индекс доверия от 0 до 100: защита, домен, документы и контакты.

    Оценить доверие
  • Доступность из стран

    Открывается ли сайт из Казахстана, России, Украины, Турции, Германии и США.

    Проверить доступность
  • Битва сайтов

    Сравните свой сайт с конкурентом по всем темам и найдите, где отстаёте.

    Сравнить сайты