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. Это был совет о веб‑разработке. Хотите знать всё о коде, тестах, фронтенд‑разработке, цеэсэсе, яваскрипте, рельсах и джейде? Присылайте вопросы.