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

Share
14.03.2018

СОДЕРЖАНИЕ:

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

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

Самым логичным и очевидный способ – проверка сайта на непосредственных устройствах эксплуатации. Но что делать если необходимых устройств нет под рукой или в распоряжении всего 1-3 устройства?
Ответ достаточно прост – необходимо открыть тестируемый веб-сайт с Вашего компьютера и использовать популярные браузеры.

P.S. Вот так адаптивность сайта не проверить:

В этой статье я предлагаю 2 браузера в которых можно провести тесты по адаптивности сайта:

Google Chrome

Mozilla Firefox

Google Chrome

1. Необходимо зайти на тестируемый ресурс, к примеру http://dev.alraa.pro/verstkovo/
2. Осуществить простые действия по открытию консоли Google Chrome

Открыть консоль можно одним из трех действий:

Нажмите на кнопку F12, находится она в верху с права на Вашей клавиатуре

Второй способ – это сочетание клавиш Ctr+Shift+I

Для третьего способа необходимо открыть меню браузера (три точки справа вверху окна браузера) в выпадающем меню выбрать «Дополнительные инструменты» и «Инструменты разработчика»

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

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

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

Нажав на место, отмеченное на скриншоте (Кнопка Responsive) можно выбрать интересующее Вас мобильное устройство.

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

После чего необходимо обновить страницу, нажмите Ctrl+F5 для повторной загрузки сайта или круглую кнопку со стрелочкой находящуюся рядом с полем ввода адреса сайта и стрелочками «Назад-Вперед».

Теперь Вы можете точно оценить внешний вид и качество верстки Вашего сайта с любого мобильного устройства, в нашем примере – это Galaxy S5

Mozilla Firefox

Начальный алгоритм проверки сайта на адаптивность в Firefox практически не отличается от Google Chrome.

1. Переходим на необходимый веб-сайт. Я снова использую http://dev.alraa.pro/verstkovo/
2. Переход в консоль Firefox выполняется одним из двух способов:

Сочетание клавиш Ctrl+Shift+M или же нажимаем на три в правом верхнем углу экрана выберете пункт «Веб-разработка» и в нем «Адаптивный дизайн»

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

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

Надеюсь материалы представление в статье были полезны для Вас.

Оставляйте Ваши комментарии, и я обязательно отвечу на них.

Подпишитесь на блог

В блоге

  • CSS
  • Pixel Perfect
  • UI\UX
  • Адаптивная верстка
  • Анимация
  • Бизнес
  • Верстка
  • Достижения
  • Идеи
  • Интернет-магазин
  • Кейс
  • Лендинг
  • Обзор
  • Написание кода
  • Примеры работ
  • Разработка
  • Разработка сайта
  • Результат
  • Сайт
  • Стоимость
  • Тестирование
  • Успех
  • Чек лист