Как сделать сайт адаптивным для мобильных устройств

Чтобы сделать сайт адаптивным, добавьте метатег viewport, постройте макет от мобильной версии с гибкими ширинами и используйте CSS-брейкпоинты, чтобы перестроить его на больших экранах — складывая колонки, сворачивая меню и масштабируя изображения. Затем проверьте каждую страницу в ширине телефона на горизонтальную прокрутку, мелкий текст и кнопки, которые неудобно нажимать. На сайте, созданном с ИИ, одного понятного промпта и проверки в превью размера телефона обычно хватает, чтобы исправить большую часть проблем.

Что такое адаптивный дизайн

Адаптивный сайт использует один набор страниц и адресов, которые подстраиваются под экран. Вместо отдельного «m.»-сайта CSS меняет раскладку при определённых ширинах, которые называются брейкпоинтами. Основные элементы:

• Метатег viewport говорит мобильным браузерам использовать настоящую ширину устройства.
• Гибкие макеты используют проценты, flexbox и grid вместо фиксированных ширин в пикселях.
• Медиазапросы (или классы фреймворка, например md: в Tailwind) меняют раскладку выше заданной ширины.
• Гибкие медиа — изображения и видео, которые уменьшаются, чтобы поместиться в контейнер.

Это важно, потому что значительная часть трафика, вероятно, приходит с телефонов, а Google индексирует мобильную версию ваших страниц. Если контент или ссылки есть только на десктопе, Google, возможно, их тоже не увидит.

Варианты и компромиссы

Мобильный подход обычно проще: одноколоночный макет — самый простой, а добавлять колонки по мере появления места менее трудоёмко, чем убирать их.

Части, которые чаще всего ломаются

Метатег viewport

Если страница на телефоне выглядит как крошечный десктопный сайт, метатега viewport нет:

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

Не добавляйте maximum-scale=1 или user-scalable=no. Запрет масштабирования щипком затрудняет использование сайта людям с плохим зрением.

Фиксированные ширины и горизонтальная прокрутка

Самая частая адаптивная ошибка — что-то шире экрана: контейнер с фиксированной width: 1200px, широкая таблица, длинный адрес или блок кода, изображение без max-width: 100%. Тогда вся страница прокручивается в сторону. Используйте max-width вместо width, позвольте тексту переноситься и дайте широким элементам собственную область прокрутки.

Навигация

Пять пунктов десктопного меню редко помещаются на телефоне. Обычный ответ — кнопка меню, которая открывает панель. Держите видимыми два-три самых важных действия — «Записаться», «Корзина», «Войти» — и убедитесь, что меню работает с клавиатурой и легко закрывается.

Текст и области нажатия

• Основной текст около 16 px — разумный минимум на телефонах. Поля ввода с меньшим шрифтом заставляют iPhone приближать экран при нажатии.
• Делайте кнопки и ссылки легко нажимаемыми. WCAG 2.2 AA задаёт минимум 24 на 24 CSS-пикселя (или достаточный интервал); около 44 пикселей удобнее для пальца.
• Оставляйте промежутки между соседними ссылками, чтобы не нажимать не ту.

Таблицы и данные

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

Изображения и медиа

Используйте max-width: 100% и height: auto, отдавайте файлы поменьше на маленьких экранах через srcset и задавайте ширину и высоту, чтобы избежать прыжков раскладки. Встроенные видео и карты нуждаются в адаптивной обёртке, чтобы сохранять пропорции. Меньшие изображения также ускоряют страницы — см. как ускорить сайт.

Формы

Пишите подписи над полями, делайте поля на всю ширину и используйте правильные типы полей (type="email", type="tel", inputmode="numeric"), чтобы на телефонах появлялась подходящая клавиатура. Размещайте кнопку отправки там, куда дотянется большой палец, и держите её видимой, когда открыта клавиатура.

Взаимодействия только по наведению

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

Промпты, которые работают

Для нового сайта сразу скажите это:

Построй мобильную версию в первую очередь. Одна колонка на телефонах, две колонки от ширины планшета, полная раскладка для десктопа. Никакой горизонтальной прокрутки при ширине 320 px, текст не меньше 16 px, области нажатия не меньше 44 px, меню-кнопка на маленьких экранах и таблицы, которые превращаются в карточки на телефонах.

Для существующей страницы опишите, что видите:

На телефонах страница /pricing прокручивается в сторону, а три карточки тарифов сжаты рядом. Ниже 768 px сложи карточки в столбик, сделай таблицу сравнения прокручиваемой по горизонтали внутри её контейнера с закреплённой колонкой признаков, а десктопную раскладку не меняй.

Проверь каждую страницу при ширине 375 px. Перечисли всё, что выходит за границы, перекрывается, имеет текст меньше 16 px или области нажатия меньше 44 px, либо работает только при наведении, и исправь каждое.

Пошагово

1. Проверьте метатег viewport в заголовке страницы.
2. Протестируйте при ширине 320–375 px в режиме устройства браузера или в превью размера телефона. Прокрутите каждую страницу сверху донизу.
3. Сначала уберите горизонтальную прокрутку. Найдите элемент, который слишком широк; всё остальное трудно оценить, пока он не исчез.
4. Разберитесь с навигацией: кнопка меню, ключевые действия видны.
5. Проверьте текст, области нажатия и формы в каждом ключевом сценарии — регистрация, поиск, оформление заказа, контакты.
6. Разберитесь с таблицами и медиа: карточки или контейнеры с прокруткой, адаптивные изображения и встраивания.
7. Проверьте промежуточные размеры. Медленно меняйте ширину от телефона до десктопа: раскладки часто ломаются вокруг ширины планшета.
8. Протестируйте на реальном телефоне. Эмуляторы пропускают такие вещи, как экранная клавиатура, закрывающая кнопку, вырезы экрана и скорость сайта на мобильном интернете.

Частые ошибки

• Тестирование только на одном размере телефона. Проверьте маленький телефон, большой телефон и планшет.
• Скрывать контент на мобильном, чтобы он поместился. Google индексирует мобильную версию, а пользователям телефона нужна та же информация.
• Отключать масштабирование в метатеге viewport.
• Изображения размера десктопа на телефонах — это время загрузки и трафик.
• Фиксированные элементы, которые накапливаются: липкая шапка, баннер cookies и чат-кнопка могут закрыть половину экрана телефона.
• Всплывающие окна, которые нельзя закрыть на маленьком экране, потому что кнопка закрытия за пределами видимости.

Чек-лист для мобильных

• Метатег viewport есть; масштабирование не отключено
• Нет горизонтальной прокрутки при 320 px ни на одной странице
• Основной текст ~16 px; поля ввода не вызывают приближение
• Области нажатия достаточно большие и разнесены
• Меню работает на телефонах и с клавиатуры
• Таблицы читаемы на телефонах (карточки, меньше колонок или контейнер с прокруткой)
• Изображения и встраивания масштабируются; отдаются файлы подходящего размера
• Формы используют правильные типы полей; кнопка отправки доступна
• Ничто важное не зависит от наведения
• Проверено хотя бы на одном реальном телефоне

Адаптивная раскладка также входит в доступность: WCAG требует, чтобы контент работал при ширине 320 px и масштабе 200%. Если вы создаёте приложение, которым люди будут пользоваться каждый день на телефонах, как создать веб-приложение, удобное на мобильных идёт дальше, включая устанавливаемые PWA.

Адаптивный дизайн на Mythex

Mythex создаёт адаптивные веб-приложения, а на Pro может упаковать их как приложения для Android и iPhone. В рабочем пространстве нажмите значок телефона над Preview (Switch to Mobile), чтобы увидеть приложение в рамке телефона, и потяните за край рамки, чтобы проверить другие ширины (Preview и Code). В документации есть короткий стартовый промпт для исправления раскладки на маленьких экранах в промптах для адаптивности. Проверьте и на реальном телефоне: откройте опубликованный адрес или отправьте ссылку на превью и откройте её на телефоне.

Вопросы