Зарегистрируйтесь для доступа к 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, то вы сможете видеть данную статистику по всем страницам вашего сайта.

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

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

Ещё один популярный сервис — BrowserStack. Хоть он и является платным, но его возможности позволяют проверить страницу почти во всех доступных связках операционных систем и браузеров. У сайта есть бесплатный период, во время которого можно протестировать страницы и посмотреть, как работает приложение.

BrowserStack выбор браузера

BrowserStack часто используется в компаниях, поэтому его знание — хороший навык для любого верстальщика

BrowserStack

Если бюджет команд ограничен, то рекомендуем использовать сервис Lambda Test


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

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

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

Для полного доступа к курсу нужен базовый план

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

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

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

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

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

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

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

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

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

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

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

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и соглашаетесь с «Условиями использования»