320px-414px: Оптимальная ширина мобильного меню (sweet spot)

Когда загружается QR-меню, важно только одно: реальная ширина экрана телефона в пикселях. Мейхане на 24 стола в Измире Конак увеличил мобильную конверсию на 38% после mobile-first редизайна — единственное изменение было миллиметровой подгонкой под диапазон 320-414px.

Почему 320-414px

По данным StatCounter 2024, 72% посетителей QR-меню используют устройства этого диапазона: iPhone SE (320px), iPhone 12/13/14 (390px), iPhone 14 Plus (414px), Samsung Galaxy S (360-412px). Планшеты — лишь 12%, десктоп — 16%.

Темы thMenu используют подход "mobile-only-priority". У планшетов и десктопов свои брейкпоинты, но любое критическое UX-решение принимается на 375px.

Правила дизайна

Три необсуждаемых правила:

• Tap-target ≥ 44×44px — требование Apple HIG и WCAG 2.5.5.
• Padding ≥ 16px — внутренние отступы обязательны.
• Body шрифт ≥ 14px, input ≥ 16px — iOS Safari делает авто-зум для меньших значений.

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

Самая частая ошибка: меню идеально выглядит на 1200px, но даёт горизонтальный скролл на 360px. Редактор тем thMenu включает превью "Тест на 320px".

Решение: однокоронные карточки, изображения aspect-ratio: 4/3, sticky фильтр. Время на странице выросло с 1:42 до 3:18, add-to-cart вырос на 38%.

FAQ

320px ещё актуален? Да — iPhone SE и старые Android всё ещё используют его; их игнорирование стоит 5-8% выручки.

Нужен ли отдельный дизайн для планшета? Нет — Flexbox/Grid сами масштабируются от 768px.

Альбомный режим ломает раскладку? Может — thMenu сокращает шапку на 40% в landscape.

Было полезно? Поделитесь.