Мобільна версія сайту розміри: актуальні параметри 2026
Більшість відвідувачів сайтів уже давно заходять зі смартфонів. Якщо сторінка виглядає стиснутою, текст дрібний, а кнопки важко натиснути — людина просто йде. Розміри мобільної версії визначають, чи залишиться користувач, чи конверсія впаде.
У 2026 році найпоширеніші CSS-viewport становлять 360–412 пікселів у ширину. Саме на ці значення варто орієнтуватися при розробці. Окрема мобільна версія (m.site.com) і адаптивний дизайн працюють по-різному, але вимоги до розмірів елементів залишаються схожими.
Нижче — конкретні цифри, брейкпоінти, розміри шрифтів і кнопок, типові помилки та практичний чек-лист. Усе перевірено на актуальних даних трафіку.
Чому саме розміри вирішують досвід на мобільному
Екран смартфона фізично менший за монітор. Користувач тримає пристрій однією рукою, часто в русі, і очікує швидкого результату. Якщо контент не вміщується в ширину viewport без горизонтального скролу — це вже провал.
Google оцінює мобільну зручність через Core Web Vitals і mobile-first індексацію. Сайти з поганою адаптацією отримують нижчі позиції. Крім того, швидкість завантаження і зручність натискання безпосередньо впливають на конверсію: занадто маленькі кнопки збільшують кількість помилкових кліків, а дрібний текст змушує зумити.
З практики видно, що навіть якісний десктопний дизайн часто «ламається» на 360 px, якщо не перевіряти реальні пристрої. Тому починати варто не з красивої картинки, а з точних розмірів viewport.
Реальні viewport популярних пристроїв у 2026 році
Важливо розрізняти фізичну роздільну здатність екрана і CSS-viewport. Браузер працює саме з viewport — логічними пікселями. На Retina-дисплеях один CSS-піксель може відповідати двом або трьом фізичним.
За даними DeviceAtlas (травень 2026), найпоширеніші ширини viewport серед мобільного трафіку такі:
| Viewport (ширина) | Частка трафіку | Типові пристрої |
|---|---|---|
| 360 px | 18,2 % | Samsung Galaxy (базові моделі), бюджетні Android |
| 384 px | 17,4 % | Samsung Ultra та A-серія |
| 412 px | 17,1 % | Google Pixel, великі Android, Motorola |
| 320 px | 7,0 % | Зум доступності, старі iPhone, max display zoom |
| 390–393 px | ~7 % | iPhone 12–16, сучасні флагмани |
| 414–430 px | ~8–10 % | iPhone Plus / Pro Max, великі Android |
Джерело: DeviceAtlas, травень 2026.
Найбезпечніший підхід — проектувати спочатку під 360 × 800 px (Android) і перевіряти на 390 × 844 px (типовий iPhone). Якщо макет комфортно вміщується в 360 px, він майже завжди добре виглядає на ширших екранах.
Висота viewport варіюється сильніше через вирізи, панелі браузера та орієнтацію. Тому для висоти краще використовувати сучасні одиниці dvh замість класичних 100vh.
Рекомендовані брейкпоінти та mobile-first підхід
Брейкпоінти — це точки, у яких макет змінює структуру. Не варто прив’язувати їх до конкретних моделей телефонів. Краще орієнтуватися на поведінку контенту.
Поширений набір для 2026 року:
- до 576–640 px — мобільний (одна колонка);
- 768 px — планшети та великі телефони;
- 1024 px — ноутбуки та малі десктопи;
- 1280–1440 px — стандартні монітори.
Підхід mobile-first означає: спочатку пишете стилі для найвужчого екрана, а потім додаєте правила через min-width. Це зменшує кількість перевизначень і робить CSS чистішим.
Приклад базової структури:
Базові стилі (для телефонів) → @media (min-width: 768px) → @media (min-width: 1024px).
Frameworkи типу Tailwind і Bootstrap уже мають схожі значення (640 / 768 / 1024), і їх зручно використовувати як стартову точку, коригуючи під конкретний контент.
Viewport meta-тег — обов’язкова основа
Без правильного meta viewport браузер вважає, що сторінка має ширину близько 980 px, і просто масштабує її. Текст стає дрібним, а користувач змушений зумити.
Стандартний і рекомендований тег:
Додатково можна додати viewport-fit=cover, якщо потрібно враховувати вирізи (notch) і використовувати safe-area-inset. Не обмежуйте maximum-scale без вагомої причини — це погіршує доступність.
Після встановлення тега всі розміри (width, font-size, padding) починають працювати відносно реальної ширини екрана пристрою.
Практичні розміри елементів на мобільному
Окрім загальної ширини сторінки, критичні розміри окремих елементів.
Шрифти. Мінімальний комфортний розмір основного тексту — 16 px. Для заголовків — від 20–24 px. Міжрядковий інтервал 1,4–1,6. На дуже вузьких екранах іноді зменшують до 15 px, але краще уникати цього.
Кнопки та клікабельні зони. Рекомендація Apple і Google — мінімум 44 × 44 px (краще 48 × 48 px). Відстань між клікабельними елементами має бути достатньою, щоб палець не зачіпав сусідні.
Відступи. Бічні padding контейнера на мобільному зазвичай 16–24 px. Занадто малі відступи роблять контент «прилиплим» до країв, занадто великі — зменшують корисну ширину.
Зображення. Використовуйте srcset і sizes, щоб браузер завантажував версію, відповідну ширині та DPR. Для телефонів часто достатньо зображень шириною 750–1200 px (з урахуванням 2×–3× щільності).
Навігація майже завжди перетворюється на «гамбургер» або нижню панель. Головне — щоб пункти меню залишалися доступними одним пальцем.
Поширені помилки при роботі з розмірами
Найчастіша — фіксована ширина контейнера в пікселях (наприклад, 1200 px або 375 px). На вужчих екранах з’являється горизонтальний скрол.
Друга — ігнорування 320 px. Хоча частка невелика, користувачі з увімкненим збільшенням тексту або старими пристроями все одно стикаються з проблемами.
Третя — різні відступи і розміри шрифтів лише «на око» в редакторі, без перевірки на реальних телефонах. Емулятори Chrome допомагають, але не показують усі нюанси (safe area, поведінка клавіатури, орієнтація).
Четверта — створення окремої мобільної версії без синхронізації контенту. Якщо на m.site.com інший текст або відсутні важливі сторінки, користувач і пошуковик отримують розсинхрон.
П’ята — забути про landscape-орієнтацію. Навіть якщо основний макет портретний, на широких телефонах у ландшафті контент може «розтягуватися» неприродно.
Окрема мобільна версія чи адаптивний дизайн
Окрема мобільна версія (піддомен m. або mobile.) дозволяє повністю переробити структуру під маленький екран: менше контенту, інша навігація, спрощені форми. Її розміри зазвичай жорстко обмежені 320–480 px.
Адаптивний (responsive) дизайн використовує один URL і змінює вигляд через CSS media queries. Розміри елементів змінюються плавно або ступінчасто залежно від ширини.
У 2026 році Google віддає перевагу responsive-підходу: один URL, одна індексація, менше проблем із дублюванням. Окрема версія має сенс лише тоді, коли потрібен кардинально інший функціонал або контент (наприклад, у дуже складних сервісах).
Незалежно від обраного шляху, базові розміри елементів (шрифти, кнопки, відступи) залишаються тими самими.
Чек-лист перевірки мобільної версії
- Встановлено width=device-width, initial-scale=1.
- Макет коректно виглядає на 360, 390 і 412 px.
- Немає горизонтального скролу на жодному з тестових розмірів.
- Основний текст ≥ 16 px, кнопки ≥ 44 × 44 px.
- Зображення оптимізовані через srcset.
- Перевірено на реальному iPhone і Android (або через BrowserStack / LambdaTest).
- Core Web Vitals у зелених значеннях на мобільному (PageSpeed Insights).
- Навігація і форми зручні однією рукою.
Якщо після цих перевірок сторінка все ще «стрибає» або елементи накладаються — варто подивитися на container queries. Вони дозволяють адаптувати окремі блоки не за шириною всього екрана, а за шириною батьківського контейнера. У 2026 році підтримка вже стабільна в основних браузерах.
Правильні розміри мобільної версії — це не разове налаштування, а постійна практика. Нові моделі телефонів з’являються регулярно, але основні viewport-ширини змінюються повільно. Якщо ви тримаєте макет у межах 360–430 px і використовуєте відносні одиниці, сайт залишатиметься зручним ще довго.
