QR菜单加载时,唯一重要的是手机的实际像素宽度。伊兹密尔Konak的24桌餐厅在移动优先重设计后移动转化率上升38% — 唯一的改变是毫米级适配320-414px区间。
为什么是320-414px
StatCounter 2024数据显示,72%的QR菜单访客使用此区间的设备:iPhone SE (320px)、iPhone 12/13/14 (390px)、iPhone 14 Plus (414px)、三星Galaxy S系列 (360-412px)。平板仅占12%,桌面端16%。
thMenu主题采用"mobile-only-priority"方法。平板和桌面有自己的断点,但所有关键UX决策都在375px基准上做出。
设计规则
三条不可妥协的规则:
- 点击目标 ≥ 44×44px — Apple HIG和WCAG 2.5.5要求。
- Padding ≥ 16px — 强制内边距。
- Body字体 ≥ 14px,input ≥ 16px — iOS Safari在16px以下自动缩放。
常见错误
最常见错误:在1200px看起来完美的菜单在360px产生水平滚动。thMenu主题编辑器提供"320px测试"预览来在部署前发现这个问题。
解决方案:单列卡片布局、aspect-ratio: 4/3图片、sticky筛选栏。页面停留时间从1:42升至3:18,add-to-cart上升38%。
常见问题
320px还有意义吗? 有 — iPhone SE和老款Android仍在使用;忽略它们将损失5-8%营收。
需要单独的平板设计吗? 不需要 — Flexbox/Grid从768px起自动缩放。
横屏模式会破坏布局吗? 可能 — thMenu在横屏模式下自动将header高度减少40%。
觉得有用?分享给朋友。