Сегодня: 19 Июн, 2021
Заметки сисадмина

Как проверить сайт на разных разрешениях

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

Как проверить сайт на разных разрешениях


Популярные разрешения экрана


Нет лучшего размера экрана, для которого можно было бы разработать дизайн. Веб-сайты должны меняться отзывчиво и быстро при любом разрешении (как 360×640, так и 1920×1080).

Анализ посещаемости почти полумиллиона посетителей за первые 6 месяцев 2020 года представлен в таблице:



РазрешениеПользователи – 451 027
11920×108088,378 (19,53%)
21366×76867,912 (15,01%)
31440×90043,687 (9,65%)
41536×86432,872 (7,26%)
52560×144025,954 (5,73%)
61680×105020,068 (4,43%)
71280×72015,138 (3,34%)
81280×80014,007 (3,09%)
9360×64011,085 (2,45%)
101600×90010,193 (2,25%)
Наиболее распространенные разрешения настольных ПК (статистика за май 2019 – май 2020):
  1. 1366×768 – 23,49%.
  2. 1920×1080 – 19,91%.
  3. 1536×864 – 8,65%.
  4. 1440×900 – 7,38%.
  5. 1280×720 – 4,89%.
  6. 1600×900 – 4,01%.
  7. 1280×800 – 3,33%.
Наиболее распространенные разрешения смартфонов (статистика за май 2019 – май 2020):
  1. 360×640 – 17,91%.
  2. 375×667 – 7,61%.
  3. 414×896 – 6,52%.
  4. 360×780 – 5,56%.
  5. 360×760 – 5,06%.
  6. 414×736 – 3,74%.
Наиболее распространенные разрешения планшетов (статистика за май 2019 – май 2020):
  1. 768×1024 – 51,98%.
  2. 1280×800 – 7,11%.
  3. 800×1280 – 5,34%.
  4. 601×962 – 4,47%.
  5. 600×1024 – 2,85%.
  6. 1024×1366 – 1,96%.

Проверка сайта на разных разрешениях через браузеры


Самый простой способ проверки совместимости сайта с различными разрешениями мониторов – использовать предоставляемый разработчиками браузеров инструментарий.

Firefox


  1. Открыть в браузере страницу, которую необходимо протестировать.
  2. Кликнуть левой кнопкой мышки по иконке меню в виде трех горизонтальных линий. Также, чтобы сразу открыть нужный раздел, можно одновременно нажать сочетание клавиш Ctrl+Shift+M.
  3. В списке найти пункт «Веб-разработка». Далее выбрать «Адаптивный дизайн».
  4. Сайт откроется в маленьком разрешении. Здесь можно задать размер и выбрать из выпадающего списка устройство (или добавить новое).
  5. Для фиксации проблемы используется опция скриншотов, которая находится на верхней панели.
  6. Щелкнуть правой кнопкой по значку в виде крестика, расположенном вверху справа, для выхода из режима тестирования.

Chrome


  1. Открыть в браузере страницу, которую необходимо протестировать.
  2. Кликнуть левой кнопкой мышки по иконке меню в виде трех вертикальных точек. В дополнительных параметрах выбрать «Инструменты разработчика». Также, чтобы сразу открыть консоль разработчика, можно одновременно нажать сочетание клавиш Ctrl+Shift+I.
  3. На верхней панели клацнуть по иконке в виде телефона (станет синего цвета) или нажать сочетание клавиш Ctrl+Shift+M.
  4. Установить разрешение для проверки, выбрать устройство из списка или добавить новое.
  5. При желании можно изменить масштаб. Его уменьшение соответствует увеличению разрешения, а увеличение – наоборот, уменьшению разрешения. Такой способ поможет увидеть, как выглядят различные элементы, и при необходимости внести изменения в проект.
  6. Чтобы закрыть режим разработчика, кликнуть по крестику, расположенному в верхнем углу справа.

Yandex


  1. Открыть в браузере страницу, которую необходимо протестировать.
  2. Зайти в меню (три горизонтальные линии), выбрать дополнительные параметры и перейти в раздел «Инструменты разработчика».
  3. Справа появится консоль – точно такая же, как и в Chrome.
  4. Переключить панель инструментов устройства, щелкнув левой кнопкой по иконке в виде телефона (на верхней панели).
  5. Задать необходимые размеры или изменить масштаб. В выпадающем меню «Responsive» выбрать девайс.
  6. Система позволяет добавить новое устройство (опция «Edit» в разделе «Responsive»).
  7. Для выхода из режима разработчика кликнуть по крестику, расположенному в верхнем углу справа.

Другие браузеры


Принцип открытия раздела для тестирования сайта точно такой же, как описано выше:
  1. Opera (Ctrl+Shift+I или меню – раздел «Разработка»).
  2. Edge (F12 или меню – раздел «Дополнительные средства» – «Эмуляция»).
  3. Safari (настройки – раздел «Настройки» – «Дополнения» – включить опцию разработки – меню – «Разработка».

Онлайн-сервисы для проверки адаптива


Многие ресурсы представлены в интернете в свободном доступе. Но они имеют некоторые ограничения, и если проверка выполняется часто (а ручное тестирование неудобно, т.к. занимает много времени), можно оплатить подписку.

BrowserStack


BrowserStack – это один из самых продвинутых и полнофункциональных инструментов. Предлагает более чем 1000 мобильных и настольных браузеров, при этом список постоянно обновляется, основываясь на тенденциях рынка и статистике пользователей.


Позволяет протестировать сайт не только на адаптивность, но и на кроссбраузерность. Для начала работы необходимо залогиниться через гугл-аккаунт. Бесплатный доступ для интерактивного тестирования браузера и мобильного приложения открывается только на 30 мин., 100 мин. дается на автотестирование.


Каждое устройство доступно до 1 мин. во время бесплатной пробной версии.

Стоимость подписки для проверки сайтов только в настольных браузерах (для одного пользователя) – 29 долл., в настольных и мобильных – 39 долл.

Screenfly


Screenfly – это бесплатный инструмент для тестирования веб-сайта на разных размерах экрана и разных устройствах. Удобный и простой сервис, позволяет выбирать разрешения из списка или создавать собственные. Необходимо вставить ссылку на сайт в единственное поле на странице и найти баг.


Рекомендуемые устройства включают настольные компьютеры, планшеты, телевизоры и смартфоны.

CrossBrowserTesting


Главный конкурент BrowserStack, который предлагает более 1500 браузеров и устройств для тестирования адаптивного веб-сайта.


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

Есть несколько вариантов подписки:

  1. Live Testing – для ручных тестировщиков и разработчиков, которым нужны удаленные браузеры для взаимодействия, тестирования и отладки (29 долл., 1 юзер).
  2. Automated Testing – для групп разработки и контроля качества Waterfall, которым необходимо запускать ручные и автоматические тесты (78 долл., 1 юзер).
  3. Unlimited Testing – когда требуется неограниченное тестирование на параллельных устройствах и в браузерах (100 долл., 1 юзер).

Ghostlab


Платное приложение Ghostlab позволяет тестировать веб-сайт на множестве браузеров и мобильных устройств одновременно. Можно начать проверку в одном браузере или устройстве, а все остальные будут отражать действия, независимо от того, нажимает ли пользователь ссылки, выбирает кнопки, заполняет формы или перезагружает страницу.

Удобно, что можно делать снимки экрана с любого устройства, аннотировать их и перетаскивать на свой баг-трекер.

Пробный период длится 7 дней. Стоимость программы – 49 долл.

Responsinator


Это – симулятор iPad и iPhone. Удобство Responsinator заключается в его простоте. Нужно просто вписать URL-адрес страницы, и этот бесплатный инструмент покажет, как веб-сайт отображается в самых популярных размерах экрана.


Ресурс предлагает протестировать страницу в следующих вариантах ширины: 375, 734, 412, 684, 667, 414, 736, 768, 1024.

Инструменты от поисковых систем для проверки адаптива


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

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

Google Mobile Friendly


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


Google Mobile Friendly лучше всего подходит для проверки удобства использования мобильных девайсов и фрагментов кода.

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

Mobile Friendly – Яндекс.Вебмастер


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


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

Как узнать, какими браузерами пользуются посетители сайта?


Для этого следует зайти в систему сбора статистики Google Analytics/Яндекс.Метрики – в соответствующем разделе представлен перечень браузеров и количество посещений.


Важно! Сайт должен быть подключен к Google Analytics/Яндекс.Метрике.

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

Поделиться
Комментарии
Максим Орлов

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

Оставить комментарий

Ваш Email адрес не будет опубликован. Все обязательные поля обозначены *