Когда сайт одинаково хорошо и без ошибок отображается на смартфоне, планшете и большом мониторе, говорят, что он адаптивный.
Если есть проблемы с адаптивностью, на одном устройстве сайт может выглядеть хорошо, а на другом картинки, кнопки и текст будут наезжать друг на друга. Чтобы проверить адаптивность конкретного сайта, его можно загрузить на нескольких устройствах с разными размерами и типами экранов. Или использовать для этого компьютер и специальные сервисы, которые имитируют отображение сайта на нужных устройствах: в этой статье расскажу о них подробнее.
Инструменты разработчика в браузере
Сколько стоит: бесплатно
Эту функцию называют инструментами разработчика, или DevTools. Они есть в большинстве популярных браузеров, в том числе в Google Chrome, «Яндекс Браузере», Firefox и Safari. Названия пунктов меню и способы запуска могут различаться в зависимости от браузера и операционной системы.
Например, в Google Chrome на macOS можно кликнуть по странице правой кнопкой мыши и выбрать «Просмотреть код», а в «Яндекс Браузере» — «Исследовать элемент».
Наверху страницы появится строка, где можно выбрать устройство из выпадающего списка и посмотреть, как сайт будет отображаться на нем.
Сколько стоит: бесплатно
Это расширение для браузера Chrome. Сначала нужно его установить, затем открыть сайт, который хочется проверить, и кликнуть на иконку Responsive Viewer в правом верхнем углу.
Будет видно панель адаптивности: появится отображение сайта сразу на нескольких устройствах. Какие конкретно устройства отображать, можно выбрать в настройках.Также можно указать ориентацию устройств — вертикальное или горизонтальное расположение.
Сколько стоит: бесплатно
Сервис пригодится для проверки отображения сайта на мобильных, планшетах и ноутбуках. Можно выбрать операционную систему и конкретное устройство, а также задать свой размер экрана. В списке есть, например, разные модели Айфонов и Samsung Galaxy S20 и S20+.
В сервисе можно проверить, насколько точно разработчики повторили дизайн сайта с макета. Для этого нужно загрузить картинку макета в форму и выбрать, под какое устройство рисовали дизайн.
Сколько стоит: бесплатно
Blisk — браузер для разработки и тестирования сайтов. Его можно скачать и установить на компьютер: доступны версии для Windows, macOS и Linux. В программу встроены устройства разных типов — смартфоны, планшеты, ноутбуки и компьютеры. Их можно показывать по отдельности или одновременно, чтобы сравнить отображение сайта на экранах разного размера.
Список устройств периодически обновляется: сейчас в Blisk есть некоторые модели айфонов, Google Pixel и Samsung Galaxy. Можно менять ориентацию мобильных устройств с вертикальной на горизонтальную.
Сколько стоит: 20 бесплатных тестов без регистрации, 200 — после регистрации
MobileViewer — онлайн-сервис для проверки отображения сайта на экранах разных устройств. Можно выбрать смартфон, планшет, ноутбук или компьютер и посмотреть сайт сразу на нескольких экранах. В списке есть современные модели Айфонов, Samsung Galaxy и iPad, а также ноутбуки и десктопные разрешения.
Можно выбрать несколько устройств одновременно и сравнить, как сайт выглядит на экранах разного размера. Если нужного варианта нет, можно задать свои размеры.
