Як зробити вебсайт адаптивним для мобільних пристроїв

Щоб зробити вебсайт адаптивним для мобільних, додайте мета-тег viewport, будуйте макет спершу для телефонів з гнучкими ширинами і використовуйте CSS-точки перелому, щоб перебудувати його на більших екранах — складаючи колонки, згортаючи меню і масштабуючи зображення. Потім перевірте кожну сторінку при ширині телефона: чи немає горизонтального прокручування, чи текст не надто дрібний і чи кнопки достатньо великі, щоб на них натиснути пальцем. На сайті, створеному з AI, один чіткий промпт плюс перевірка в превʼю розміром із телефон зазвичай виправляє більшість проблем.

Що насправді означає адаптивний дизайн

Адаптивний сайт використовує один набір сторінок і адрес, які підлаштовуються під екран. Замість окремого сайту «m.» CSS змінює макет на певних ширинах, які називають точками перелому (breakpoints). Основні складові:

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

Це важливо, бо значна частина вашого трафіку, ймовірно, йде з телефонів, і Google індексує мобільну версію ваших сторінок. Якщо вміст або посилання існують лише на комп'ютері, Google також їх може не побачити.

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

Підхід mobile-first зазвичай простіший: одна колонка — найпростіший макет, і додавати колонки в міру появи місця легше, ніж прибирати їх.

Частини, які зазвичай ламаються

Мета-тег viewport

Якщо сторінка на телефоні виглядає як маленький десктопний сайт, мета-тега viewport немає:

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

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

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

Найпоширеніша помилка адаптивності — щось ширше за екран: фіксований контейнер width: 1200px, широка таблиця, довгий URL або блок коду, зображення без 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.
• Зображення для комп'ютера на телефонах, які уповільнюють завантаження і витрачають трафік.
• Накопичення елементів із фіксованим позиціонуванням: липкий заголовок, банер cookie і бульбашка чату можуть закрити половину екрана телефона.
• Спливні вікна, які не можна закрити на малому екрані, бо кнопка закриття за межами видимості.

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

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

Адаптивний макет також є частиною доступності: WCAG вимагає, щоб вміст працював при ширині 320 px і масштабі 200%. Якщо ви створюєте застосунок, яким люди щодня користуються на телефонах, як створити мобільний вебзастосунок розглядає це детальніше, зокрема встановлювані PWA.

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

Mythex створює адаптивні вебзастосунки, а на тарифі Pro може загорнути їх у застосунки для Android і iPhone. У робочому просторі натисніть значок телефона над Preview (Switch to Mobile), щоб побачити застосунок у рамці розміром із телефон, і перетягніть край рамки, щоб спробувати інші ширини (Preview and Code). У документації є короткий стартовий промпт для виправлення макета на малих екранах у промптах для мобільної адаптивності. Перевірте також на справжньому телефоні — відкрийте опубліковану адресу або поділіться посиланням на превʼю і відкрийте його на телефоні.

Запитання