320px-414px: Sweet spot-bredden for mobile menuer

Når et QR-menu indlæses, betyder kun én ting noget: telefonens reelle pixelbredde. En meyhane med 24 borde i Izmir Konak så mobil konvertering stige med 38% efter et mobile-first redesign — den eneste ændring var millimeterpræcis tilpasning til 320-414px-området.

Hvorfor 320-414px

Ifølge StatCounter 2024 bruger 72% af QR-menubesøgende enheder i dette område: iPhone SE (320px), iPhone 12/13/14 (390px), iPhone 14 Plus (414px), Samsung Galaxy S (360-412px). Tablets udgør kun 12%, desktop 16%.

thMenu-temaer bruger en "mobile-only-priority" tilgang. Tablet og desktop har egne breakpoints, men hver kritisk UX-beslutning træffes ved 375px.

Designregler

Tre regler uden forhandling:

• Tap-mål ≥ 44×44px — Apple HIG og WCAG 2.5.5.
• Padding ≥ 16px — obligatorisk indre margin.
• Body-font ≥ 14px, input ≥ 16px — iOS Safari auto-zoom under 16px.

Almindelige fejl

Den hyppigste fejl: et menu der ser perfekt ud på 1200px og producerer horisontal scroll på 360px. thMenu-temaeditoren har en "Test på 320px" forhåndsvisning til at fange dette før deploy.

Løsning: enkeltkolonne kortlayout, aspect-ratio: 4/3 billeder, sticky filterbar. Tid på siden steg fra 1:42 til 3:18 og add-to-cart med 38%.

FAQ

Er 320px stadig relevant? Ja — iPhone SE og ældre Androids bruger det stadig; at ignorere dem koster 5-8% af omsætningen.

Er separat tablet-design nødvendigt? Nej — Flexbox/Grid skalerer automatisk fra 768px.

Bryder landscape-tilstand layoutet? Kan — thMenu reducerer header med 40% i landscape.

Var dette nyttigt? Del det.