Как проверить, что сайт хорошо смотрится на разных устройствах: 6 способов
Бизнес
52K

Как проверить, что сайт хорошо смотрится на разных устройствах: 6 способов

10
Аватар автора

Наталья Березовская

проверяла сайты на адаптивность

Страница автора

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

Если есть проблемы с адаптивностью, то на каком-то устройстве сайт может выглядеть хорошо, а на другом картинки, кнопки и текст будут наезжать друг на друга. Это мешает пользователям взаимодействовать с сайтом. Например, клиент не сможет купить товар, если кнопка «в корзину» закрыта картинкой или оказалась за пределами экрана.

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

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

Инструменты разработчика в браузере

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

Эту функцию еще называют веб-инспектором, исследованием элементов, DevTools. Она есть во всех распространенных браузерах. В Microsoft Edge, Google Chrome и Mozilla Firefox режим вызывается клавишей F12, еще в некоторых версиях может работать сочетание клавиш Shift+Ctrl+C в английской раскладке. Или можно навести на любой элемент страницы курсор, вызвать контекстное меню правой кнопкой мыши и нажать на кнопку «Проверить» или «Исследовать код элемента».

После этого откроется режим разработчика: чаще всего экран делится на две части, с одной стороны появляется панель с кодом, с другой — сайт. Нужно найти панель, отвечающую за адаптивность, или адаптивный дизайн: обычно это кнопка Dimensions слева сверху. Затем выберите нужное устройство из выпадающего списка и смотрите, как сайт будет отображаться на нем.

Можно посмотреть, как будет отображаться сайт на разных поколениях Айфонов
Можно посмотреть, как будет отображаться сайт на разных поколениях Айфонов
В браузере Opera панель разработчика отличается только цветом, суть та же. Красным подчеркнута строка, отвечающая за проверку адаптивности
В браузере Opera панель разработчика отличается только цветом, суть та же. Красным подчеркнута строка, отвечающая за проверку адаптивности

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

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

Браузер обновит страницу, и станет видно панель адаптивности: появится отображение сайта сразу на нескольких устройствах. Какие конкретно устройства отображать, можно выбрать в панели слева: есть несколько моделей Айфонов, смартфонов от Samsung, Google и Microsoft, ноутбуки. Еще в панели сверху можно выбрать «ориентацию» устройств — вертикальное или горизонтальное расположение.

В Responsive Viewer можно изменить масштаб и ориентацию экрана
В Responsive Viewer можно изменить масштаб и ориентацию экрана

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

Сервис пригодится для проверки отображения сайта на мобильных и планшетах. Можно выбрать операционную систему смартфона и конкретную модель, на которой хочется его протестировать: есть практически все модели Айфонов, от SE до 12 Pro, а Android представлен моделями Samsung Galaxy S10 Lite, S20, Note20 и A71.

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

Дополнительно в сервис встроен валидатор — программа, которая проверяет HTML-код сайта по современным стандартам и показывает ошибки верстки, если такие есть.

Сервис показывает, как ваш сайт выглядит сразу на нескольких устройствах
Сервис показывает, как ваш сайт выглядит сразу на нескольких устройствах

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

В этом онлайн-сервисе можно проверить, как сайт или мобильное приложение выглядит на эмуляторах разных устройств, в том числе на последних моделях Apple и Samsung и в разных браузерах.

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

Сервис BrowserStack платный, но у нового аккаунта есть 30 бесплатных минут, чтобы его протестировать. При регистрации просят корпоративный адрес электронной почты: почта на Yandex и Mail не подошла, но почту Google сервис использовать разрешил.

В BrowserStack можно проверить отображение сайта не только на каком⁠-⁠то устройстве, но и в конкретном браузере на этом устройстве. Например, как поведет себя сайт в браузере Google Chrome на смартфоне Samsung Galaxy S21
В BrowserStack можно проверить отображение сайта не только на каком⁠-⁠то устройстве, но и в конкретном браузере на этом устройстве. Например, как поведет себя сайт в браузере Google Chrome на смартфоне Samsung Galaxy S21

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

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

Для проверки доступны браузеры с разрешением экранов Айфонов от SE до 12 Pro, Google Pixel до 4XL, старых моделей Samsung Galaxy от S6 до S9. Кроме смартфонов можно протестировать, как выглядит сайт на Айпадах, ноутбуках и компьютерах разного разрешения. Как и во всех сервисах, ориентацию виртуального устройства можно поменять с вертикальной на горизонтальную.

Можно делать скриншоты или записывать на видео происходящее в браузере.

На старте браузер попросит вас выбрать устройства, в которых нужно проверить сайт
На старте браузер попросит вас выбрать устройства, в которых нужно проверить сайт

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

Screenfly — онлайн-сервис с большим выбором устройств: Айфоны от 5 до XS Max, Samsung Galaxy от S7 до S9+ и еще несколько старых смартфонов на Android.

Можно выбрать отображение на планшете — iPad Mini, Air и Pro, Samsung Galaxy Tab 10, проверить вид сайта на ноутбуках и стационарных компьютерах или задать свой размер экрана.

Сервис показывает отображение сайта сразу на двух устройствах — смартфоне и планшете
Сервис показывает отображение сайта сразу на двух устройствах — смартфоне и планшете

Создавали собственный сайт? Расскажите, с какими трудностями столкнулись:
Комментарии проходят модерацию по правилам журнала
Загрузка
0

По сабжу: только браузерстак - годный сервис, т.к. запускает эмуляцию на реальных устройствах, все остальные сервисы только подменяют разрешение, ну и максимум, юзер-агент, а это далеко от правды.

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

8
0

Немного странно видеть тут такую узкоспециализированную тему, те кто сайтами занимаются, и так этого знают. Хотя, может, я чего-то не понимаю.

6

Вадим, согласен. Я уже перестаю понимать тематику тж

3

Вадим, да, конечно, ведь те, кто сайтами занимаются, знают всё априори

1

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

0
0

Еще в копилку: everysize.kibalabs.com. Ну и классика – просто потаскать браузер за край, меняя вьюпорт.
Кстати, не стоит списывать со счетов старые неширокоформатные разрешения (например, 1024х768) – может оказаться, что в вашей нише они востребованы. Например, по статистике сайта моей компании (b2b, машиностроение), на такое разрешение приходится 12% визитов в год, и ПК-пользователи все еще доминируют над мобильными (60% против 40%).

3
0

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

Да, мобильники сейчас мощнее. Да, мои заблуждения - это архаизм. Но считаю: отдельно - мухи, отдельно - котлеты. У ноутбука функционал и степень защиты сильнее часто.

В защиту смартфона могу добавить: мне важны резиновая вёрстка страницы и видимая крупному пальцу кнопка "Купить" на экране iPhone 13. А для этого и нужны адекватный конструктор страниц + вышеназванные онлайн-сервисы. Конечно же, если это не Tinkoff. Ведь именно этот конструктор одинаково хорош на всех экранах? Или я ошибаюсь? ;-)

1
0

Файл, который предлагает скачать сайт https://blisk.io/ , с трояном...

0
0

Спасибо, я как раз искала, как самостоятельно проверить сайт на адаптивность. ))

0
0
Отредактировано

Поставил Blisk. На пятый день он сказал, что бесплатная сессия разработчика закончилась и теперь нужно подождать 12 часов, до открытия следующей бесплатной сессии :) Оказывается, при первичной установке дается бесплатно полная версия на 4 дня, а потом по 10 минут в сутки. Лицензия на одного пользователя 12$/мес. или 100$/год.

Responsive Viewer мне вполне заменил Blisk.

А iloveadaptive.com мне почему-то показывает серый фон, там, где на самом деле белый.

Касательно обнаружения трояна, о чем написали выше про Dr.Web - я проверил сейчас на https://www.virustotal.com, результат - только один из 69 антивирусов (VirIT) увидел в дистрибутиве трояна, что говорит скорее о ложном срабатывании. Dr.Web, не увидел ничего подозрительного.

0

Сообщество