عند تحميل قائمة 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". يوجد breakpoints للأجهزة اللوحية وسطح المكتب، لكن كل قرار 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 والأندرويد القديم لا يزالان يستخدمانه؛ تجاهلهما يكلف 5-8٪ من الإيرادات.
هل أحتاج تصميماً منفصلاً للأجهزة اللوحية؟ لا — Flexbox/Grid يتدرج تلقائياً من 768px.
هل الوضع الأفقي يكسر التخطيط؟ قد يفعل — thMenu يقلل الترويسة 40٪ في landscape.
هل وجدت هذا مفيداً؟ شاركه.
مقالات ذات صلة
ما هي قائمة QR؟ الدليل الشامل للمطاعم
تتيح قائمة QR للعملاء الوصول الفوري إلى قائمة طعامك عبر هواتفهم الذكية — دون تطب…
التحول من قائمة الطعام الورقية إلى قائمة QR الرقمية: دليل خطوة بخطوة
هل تريد اعتماد قوائم QR لكنك لا تعرف من أين تبدأ؟ يغطي هذا الدليل التصوير والمحت…
قوائم QR مستهدفة جغرافياً: تقديم لغات مختلفة حسب IP الزائر
كيف يوجّه منتجع شامل من 180 مقعداً في أنطاليا نفس QR إلى قوائم تركية أو ألمانية …