68,1% всех визитов на сайты в 2020 году совершались с мобильных устройств
Mobile vs Desktop Usage in 2020

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

68,1% всех визитов на сайты в 2020 году совершались с мобильных устройств
Mobile vs Desktop Usage in 2020

Как проверить мобильную вёрстку в браузере на компьютере?

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

В Хроме нажмите F12 или ⌘+Opt+I, чтобы открыть инструменты разработчика. Затем нажмите кнопку с телефоном и планшетом в левом верхнем углу инструментов или Ctrl+⌘+M, чтобы включить режим отладки на мобильных:

В Сафари сначала включите инструменты разработчика в настройках: меню Safari → «Настройки» → «Дополнения» → «Показывать меню „Разработка“ в строке меню». Затем на странице нажмите Ctrl+⌘+R:

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

Почему проверки в браузере на компьютере недостаточно?

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

Юзерагент. Википедия

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

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

Юзерагент. Википедия

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

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

Зачем проверять вёрстку на реальных устройствах?

Проверка на реальных устройствах — это максимально приближенные к боевым условия. Можно проверить не только правильность работы вёрстки, но и заметить проблемы с дизайном и взаимодействием на устройствах.

Часто у верстальщика под рукой есть как минимум айфон, телефон на Андроиде и айпад — самые популярные у пользователей устройства. В зависимости от задач и проекта, количество устройств с разными прошивками может увеличиваться. Скажем, мне как‑то раз приходилось верстать под сенсорный кассовый аппарат :‑)

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

  • Xcode Simulator — программа для Мака, эмулирует работу Айфонов и Айпадов на разных версиях прошивки;

  • Genymotion — сервис для эмуляции разных версий Андроид, полноценные виртуальные машины с разными версиями прошивки;

  • BrowserStack — виртуальные машины мобильных устройств и компьютеров с разными операционными системами и браузерами.

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

P. S. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.

Веб‑разработка
Отправить
Поделиться
Запинить

Рекомендуем другие советы