320px-414px: The Sweet Spot Width for Mobile Restaurant Menus

The first thing a QR menu loads into is the actual pixel width of the guest's phone. A 24-table meyhane in Izmir Konak saw mobile conversion climb 38% after a mobile-first redesign — the only change was millimeter-level fit to the 320-414px range.

Why 320-414px Is the Sweet Spot

According to StatCounter 2024 global data, 72% of QR menu visitors use devices in this range: iPhone SE (320px), iPhone 12/13/14 (390px), iPhone 14 Plus (414px), and Samsung Galaxy S series (360-412px). Tablets account for only 12%, and desktop just 16% of restaurant visits.

That's why thMenu themes use a "mobile-only-priority" approach, not just mobile-first. Tablet and desktop have their own breakpoints, but every critical UX decision is benchmarked at 375px.

Design Rules

Three non-negotiable rules for 320-414px screens:

• Tap targets ≥ 44×44px — Apple HIG and WCAG 2.5.5. Add-to-cart, category chips, language picker all meet this size.
• Padding ≥ 16px — outer content padding never drops below 16px; tight screens need breathing room.
• Body font ≥ 14px, input ≥ 16px — iOS Safari auto-zooms inputs below 16px, which destroys the flow.

Common Mistakes and Fixes

The most frequent failure mode: a menu that looks perfect on a 1200px monitor and produces horizontal scroll at 360px. thMenu's theme editor includes a "Test on 320px" preview to catch this before deploy. The Konak case had 12 product cards laid side-by-side, forcing font to 11px and clipping allergen icons.

The fix: single-column card layout, aspect-ratio: 4/3 imagery, and a sticky filter bar (top: 0). Together these moved average "time on page" from 1:42 to 3:18 and lifted add-to-cart by 38%.

FAQ

Is 320px still relevant? Yes — iPhone SE 1st/2nd gen and older Androids still ship at 320px; ignoring them costs 5-8% of revenue in a broad customer base.

Do I need a separate tablet design? No — flexbox/grid scales up automatically at 768px+. All thMenu themes handle this by default.

Does landscape mode break things? It can — a 414×896 device becomes 896×414, and sticky headers eat vertical space. thMenu themes auto-shrink header height by 40% in landscape.

Found this helpful? Share it.