Как проверить адаптивность сайта?

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

Поэтому стоит проверять адаптивность (мобильность) сайта и обращаться к специалистам, если есть проблемы с отображением и функциональностью.

Рассказываю о 6 инструментах, где это можно сделать.

Google Chrome

Сайт: https://www.google.com/intl/ru_ru/chrome/.

Стоимость: бесплатно.

У браузера Google Chrome есть мощный набор инструментов — DevTools. С его помощью можно проверить адаптивность сайта.

Для этого нужно открыть нужный ресурс, выбрать в меню «Дополнительные инструменты → Инструменты разработчика» и нажать на кнопку «Toggle device toolbar» в левом верхнем углу.

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

Mobile-Friendly Test

Сайт: https://search.google.com/test/mobile-friendly.

Стоимость: бесплатно.

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

Нужно перейти по ссылке, вставить URL и немного подождать. Mobile-Friendly Test даст короткий ответ: оптимизирована страница или нет. 

Дополнительно можно посмотреть скриншот и HTML-код, узнать код ответа сервера и разрешение на индексацию в поисковых системах. А если есть проблемы с отображением на мобильных устройствах, то понять, в чём причины.

Resizer

Сайт: https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=ru.

Стоимость: бесплатно.

Можно ещё использовать расширение Google Chrome, которое меняет размер окна браузера, тем самым эмулирует различные мобильные устройства.

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

Adaptivator

Сайт: http://adaptivator.ru/.

Стоимость: бесплатно.

Не только Google Chrome: есть и онлайн-сервисы для проверки адаптивности. 

Adaptivator показывает, как сайт выглядит в двух ориентациях на разных устройствах: iPhone, Nexia, Lumia и других. Можно даже выбрать цвет корпуса. А вот настроить произвольный размер экрана не получится.

Browserling

Сайт: https://www.browserling.com/.

Стоимость: бесплатно или подписка от $19 в месяц.

А это онлайн-сервис для кроссбраузерного тестирования.

Чтобы проверить, как сайт работает в разных браузерах, нужно указать ссылку, выбрать операционную систему и версию браузера, а потом нажать «Test now!».

Бесплатная версия ограничена по количеству настроек и длительности сеанса. Чтобы получить полный доступ, нужно купить подписку.

Browserstack

Сайт: https://www.browserstack.com/.

Стоимость: от $29 в месяц, есть бесплатная пробная версия.

Ещё один инструмент для проверки кроссбраузерности на десктопе и мобайле.

На выбор 3 000+ браузеров, настоящих устройств Android и iOS. Как и в Browserling, можно проверять локальные сайты, есть защита от несанкционированного доступа.