Создание сайта

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

Александр Рыбка 14:03:2018 500

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

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

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

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

Плохая проверка Адаптивности сайта

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

Google Chrome

Mozilla Firefox

Google Chrome

1. Необходимо зайти на тестируемый ресурс, к примеру https://verstkovo.ru/

2. Осуществить простые действия по открытию консоли Google Chrome

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

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

f12 что бы проверить адаптивность

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

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

Проверка Адаптивности Сайта

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

Проверка Адаптивности Сайта

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

Проверка Адаптивности Сайта

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

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

Проверка Адаптивности Сайта

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

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

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

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

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

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

Mozilla Firefox

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

1. Переходим на необходимый веб-сайт. Я снова использую https://verstkovo.ru/

2. Переход в консоль Firefox выполняется одним из двух способов:

Проверка Адаптивности Верстки

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

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

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

Проверка Адаптивности Сайта

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

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