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

Share
14.03.18

Содержание:

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

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

    Самым логичным и очевидный способ – проверка сайта на непосредственных устройствах эксплуатации. Но что делать если необходимых устройств нет под рукой или в распоряжении всего 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 или же нажимаем на три в правом верхнем углу экрана выберете пункт «Веб-разработка» и в нем «Адаптивный дизайн»

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

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

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

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

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

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