Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Проверка адаптивности сайта CSS: Адаптивность

Проверка на реальных устройствах

Проверка адаптивной вёрстки — важная часть вёрстки. Лучше всего проверять не после написания всех стилей, а в процессе создания. Это позволяет контролировать весь процесс разработки и даёт возможность быстро исправить стили без изменения большого количества вёрстки.

Как же проверять адаптивность? Лучший вариант — иметь десятки разных устройств. От разных мобильных устройств до мониторов с большим разрешением экрана. Но давайте признаемся честно — такое количество устройств мало кто имеет. Их нужно постоянно обновлять и покупать новые модели, а это сотни тысяч рублей ежегодно.

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

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

Инструменты разработчика в браузере

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

Для этого необходимо:

  • Перейти на интересующую нас страницу.
  • Открыть панель разработчика. Это можно сделать с помощью комбинации Ctrl (CMD) + Shift + I

Панель разработчика Chrome

  • Перейти в режим Toggle device toolbar. Это можно сделать комбинацией Ctrl (CMD) + Shift + M

Toggle device toolbar

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

Страница профессии на iPhone X Страница профессий на iPhone X в горизонтальной ориентации

Онлайн-сервисы для проверки адаптивности

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

Одним из таких сервисов проверки адаптивности страницы под мобильные устройства является созданный компанией Google сервис Mobile Friendly. Указав в сервисе ссылку на вашу страницу, вы получите сообщение о том, оптимизирован ли ваш сайт под использование на мобильных устройствах.

Вывод сервиса Google Mobile Friendly

Если ваш сайт указан в Google Search Console, то вы сможете видеть данную статистику по всем страницам вашего сайта.

Зарегистрировав ваш сайт в панели вебмастера Яндекса, вы также можете воспользоваться инструментом Проверка мобильных страниц, который проанализирует страницу на вашем сайте и выдаст отчёт о доступности на мобильных устройствах.

Результат проверки Яндекс


Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете

Для полного доступа к курсу нужна профессиональная подписка

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

Получить доступ
900
упражнения
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 120 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Верстальщик
Профессия
Вёрстка с использованием последних стандартов CSS
в любое время 5 месяцев

Есть вопрос или хотите участвовать в обсуждении?

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы соглашаетесь c «Политикой конфиденциальности» и «Условиями оказания услуг»