Больше половины посетителей с телефона: что ломается чаще всего

Тег viewport

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

Размер элементов управления

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

Горизонтальная прокрутка

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

Тег, с которого всё начинается

Эта строка ставится в раздел head и сообщает браузеру, что страница подстраивается под ширину экрана. Без неё телефон рисует страницу как настольную и уменьшает её целиком. Единственное, чего в ней быть не должно, — запрета масштабирования: user-scalable=no отбирает у человека возможность увеличить мелкий текст пальцами.

<meta name="viewport" content="width=device-width, initial-scale=1">

Как проверить без телефона

Нажмите F12 и включите режим устройства — иконка с телефоном и планшетом. Выберите ширину 390 пикселей: это типовой современный смартфон. Пройдите по главной, карточке товара и странице с формой. Три вещи видно сразу: не ездит ли страница вбок, попадаете ли вы курсором в кнопки, читается ли текст без увеличения. Автоматическая проверка делает то же самое на мобильном рендере.

Как найти элемент, который тянет страницу вбок

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