Как бесплатно проверить адаптивность сайта
Сайт считается адаптивным, когда он корректно и без ошибок отображается на экранах современных устройств любых размеров и производителей: во всех актуальных операционных системах и браузерах, на мониторах с разным разрешением, планшетах, смартфонах, ноутбуках. Чтобы проверить адаптивность сайта, нужно протестировать его на разных устройствах.
А что делать, если у вас нет 100500 разных планшетов, мониторов и других гаджетов для тестирования? Закупиться всеми возможными девайсами, поставить все существующие браузеры и приобретать все новые модели, как только они выходят на рынок? Не очень рационально. Есть вариант получше: проверить сайт онлайн на одном устройстве при помощи специальных сервисов. Мы отобрали 4 способа бесплатной проверки адаптивности сайта.
Браузерный веб-инспектор
В большинстве современных браузеров встроен специальный инструмент — «веб-инспектор», который покажет, как выглядит сайт на разных устройствах, экранах и операционных системах. В Google Chrome и Mozilla Firefox режим веб-инспектора открывается клавишей F12. Еще один простой способ вызвать нужный нам режим — кликнуть правой кнопкой мыши в любом месте страницы и нажать «Просмотреть код». Ищем функцию «Dimensions» (обычно слева вверху) и выбираем интересующее нас устройство. Например, Chrome демонстрирует, как сайт выглядит на экране Galaxy S5, iPhone5, iPad, Moto G4, Nexus 10, iPhoneX, iPad Pro, Pixel 2, Galaxy Fold и многих других устройств.
В Safari эту функцию включить еще проще ― в меню есть вкладка «Разработка ― Пользовательский агент», а в ней ― выбор вида в разных браузерах под разными ОС на разных устройствах.
Расширение браузера
Responsive Viewer — полезное расширение для браузера Google Chrome. Устанавливаем, перезагружаем браузер, заходим на интересующую страницу сайта и кликаем на иконку расширения. Удобство расширения в том, что можно выбрать сразу несколько интересующих вас устройств и сравнить, как сайт отображается на них. Например, необходимо посмотреть, как выглядит сайт на iPhoneX и Galaxy S9. Пару кликов ― и готово.
Бесплатный онлайн-сервис
Сервис I Love Adaptive без скачиваний и установок покажет, как выглядит сайт на разных устройствах, мониторах, масштабах экранов. Если предложенных вариантов недостаточно, то можно ввести свой размер экрана.
Браузер Blisk
Blisk ― специальный браузер, предназначенный для проверки адаптивности сайта. Его нужно скачать и установить, после установки станут доступны 58 устройств для проверки адаптивности. Нужно лишь нажать на иконку браузера слева вверху и выбрать нужный девайс. Blisk дополняет эффект просмотра с другого устройства с помощью графики. Если вы выбираете смартфон, то содержимое сайта отображается внутри телефона. Графика меняется в зависимости от выбранной модели.
