Quando um menu QR carrega, só uma coisa importa: a largura real em pixels do celular. Um meyhane de 24 mesas em Izmir Konak viu sua conversão móvel subir 38% após um redesign mobile-first — a única mudança foi o ajuste milimétrico à faixa 320-414px.
Por que 320-414px
Segundo StatCounter 2024, 72% dos visitantes de menus QR usam dispositivos nesta faixa: iPhone SE (320px), iPhone 12/13/14 (390px), iPhone 14 Plus (414px), Samsung Galaxy S (360-412px). Tablets representam apenas 12%, desktop 16%.
Os temas thMenu seguem abordagem "mobile-only-priority". Tablet e desktop têm seus breakpoints, mas toda decisão crítica de UX é avaliada em 375px.
Regras de design
Três regras inegociáveis:
- Tap-targets ≥ 44×44px — Apple HIG e WCAG 2.5.5.
- Padding ≥ 16px — margem interna obrigatória.
- Fonte body ≥ 14px, input ≥ 16px — iOS dá zoom automático abaixo de 16px.
Erros comuns
O erro mais frequente: um menu perfeito em 1200px que rola horizontalmente em 360px. O editor thMenu tem botão "Testar em 320px" para detectar isso antes do deploy.
Solução: cards em coluna única, imagens aspect-ratio: 4/3, barra de filtro sticky. O tempo na página foi de 1:42 para 3:18 e o add-to-cart subiu 38%.
FAQ
320px ainda é relevante? Sim — iPhone SE e Android antigos ainda usam; ignorá-los custa 5-8% do faturamento.
Preciso de design separado para tablet? Não — Flexbox/Grid escala automaticamente a partir de 768px.
O modo paisagem quebra o layout? Pode — thMenu reduz o header em 40% no landscape.
Achou útil? Compartilhe.
Artigos relacionados
O que é um menu QR? O guia completo para restaurantes
Um menu QR permite que os clientes acedam à sua ementa instantaneamente pelo sma…
Mudar do cardápio em papel para o menu QR digital: guia passo a passo
Quer adotar menus QR mas não sabe por onde começar? Este guia cobre fotografia, …
Menus QR com geolocalização: servir idiomas distintos pelo IP do visitante
Como um resort de 180 lugares em Antalya roteia o mesmo QR para menus turcos, al…