جهاز اختبار متوافق مع الهواتف المحمولة

أدخل عنوان URL، وسيقوم أداة الاختبار بتحميله في نافذة عرض محاكاة للهاتف (بمقاسات 375×812 بكسل بشكل افتراضي، وهو المقياس المخصص لهواتف آيفون)، ثم يتحقق من الأخطاء الشائعة في قابلية القراءة على الأجهزة المحمولة التي كان اختبار Google الخاص بـ “Mobile-Friendly Test” يستخدم للكشف عنها قبل إيقافه، ويُرجع قائمة يمكنك إصلاحها تشمل: غياب علامة الوصف الخاصة بنافذة العرض، نص بأحجام أقل من 12 بيكسل، أهداف للنقر أصغر من 48×48 بيكسل، التمرير الأفقي، استخدام تقنيات Flash أو إضافات غير مدعومة، ومحتوى يتجاوز عرض نافذة العرض.

كيف يتم تنفيذ الاختبار؟

  1. 1

    أدخل عنوان URL

    العنوان الكامل للرابط مع بروتوكوله؛ مخصص فقط للصفحات العامة.

  2. 2

    يتم عرض الصفحة في نافذة بحجم الهاتف

    ٣٧٥ × ٨١٢ بشكل افتراضي، ويمكن تهيئة الحجم.

  3. 3

    تُنفَّذ عمليات التحقق الآلية.

    معلمات النافذة، حجم النص، المسافة بين أهداف النقر، التدفق الزائد، الإضافات.

  4. 4

    عرض مسبق وتقرير

    لقطة شاشة لعرض الهاتف بعد التصميم، مع قائمة بالمشكلات المحددة.

ما يتحقق منه المختبر

تكوين النافذة

هل يوجد طراز <meta name="viewport" content="width=device-width, initial-scale=1">؟ في حال عدم وجوده، فإن متصفحات الهاتف تُعرض الشاشة وكأنها ذات عرض حاسوب مكتبي، وتتقلص حجم العرض لتتناسب مع الشاشة، مما يؤدي إلى ظهور نص صغير جدًا.

حجم النص

يتم تمييز أي نص مُعرض بحجم أقل من 12 بكسل؛ مما يجعل قراءته صعبة على الهاتف المحمول دون استخدام خاصية التكبير والتصغير بالضغط. توصي العديد من دليلات التصميم باستخدام حجم خط لا يقل عن 16 بيكسلًا للنص الرئيسي؛ فالأسماء القصيرة جدًا مقبولة، بينما لا يُستحسن استخدام نص رئيسي بحجم 11 بيكسلًا.

حجم هدف الضغط

يجب أن تكون الأزرار والروابط وعناصر التحكم في النماذج بأبعاد لا تقل عن 48×48 بكسل (وفقًا لإرشادات جوجل/W3C المتعلقة بسهولة الوصول على الأجهزة المحمولة). من الصعب إصابة الأهداف الصغيرة بدقة باستخدام الإبهام، وغالبًا ما تُشار إليها بشكل خاص.

مسافة بين نقاط استهداف الضغط

  • الأهداف التي تقع على بعد أقل من 8 بكسل عن الأهداف المجاورة تؤدي إلى ضغطات خاطئة؛ ويُشار إلى كلٍّ منها على حِدة.

التمرير الأفقي

إذا كان محتوى الشاشة أوسع من نطاق العرض، فسيتطلب التمرير أفقيًا، مما يؤدي إلى تجربة استخدام سيئة على الأجهزة المحمولة؛ وغالبًا ما يحدث ذلك بسبب صورة لا تحمل رموز max-width: 100% أو جدول لا يستطيع إعادة ترتيب صفوفه تلقائيًا.

الإضافات غير المدعومة

لا تعمل تقنيات فلاش وسيلفرلايت وأكتيفكس على الهواتف المحمولة، وقد تظل بعض المواقع التقليدية تعتمد عليها أحيانًا.

تحميل الخطوط

تُعرَّف الخطوط الويبية الضخمة جدًا التي تعيق عملية عرض النص لبضع ثوانٍ.

لماذا ما زال الأمر مهمًا؟

أوقفت جوجل اختبار التوافق مع الأجهزة المحمولة المستقل في ديسمبر 2023، لكن التوافق مع الأجهزة المحمولة يظل مؤشرًا مباشرًا على الترتيب عبر مؤشرات Core Web Vitals ومقاييس تجربة الصفحة. ويُشير مفهوم فهرسة الموقع بتركيز على الأجهزة المحمولة إلى أن جوجل يقوم بمسح موقعك كما لو كان جهازًا محمولًا؛ وبالتالي، ما يتعطل على الأجهزة المحمولة يظهر أيضًا في ترتيبات أجهزة الكمبيوتر المكتبية.

التصحيحات النموذجية

  • أضف ميتا نافذة العرض إلى <head> و<meta name="viewport" content="width=device-width, initial-scale=1">.
  • CSS التكيفي باستخدام استعلامات الوسائط: @media (max-width: 768px) { ... }.
  • استخدام Flexbox وGrid بدلاً من التصاميم ذات العرض الثابت.
  • ضبط الصورة max-width: 100%; height: auto بحيث تقل حجمها مع تغير حجم نافذة العرض.
  • جعل الجداول قابلة للتمرير على الشاشات الصغيرة: قم بتضمينها في <div style="overflow-x: auto">.
  • استخدم rem أو em لضبط حجم النص، حتى يتم تطبيق نظام التكبير/التصغير وفق تفضيلات المستخدم.

ما يفوت على المختبرين اكتشافه

– الأداء على الأجهزة الحقيقية: يعاني هاتف أندرويد من الفئة المنخفضة عند استخدام شبكة 3G من تأخيرات لا يُحاكيها هذا الاختبار؛ لقياس الأداء، استخدم أداة Lighthouse.

  • التفاعلات اللمسية: يجب اختبار القوائم المنسدلة التي تعتمد فقط على التمرير وتنفصل عند اللمس يدويًا على جهاز حقيقي.
    • إمكانية الوصول التي تتجاوز مجرد تنسيق حجم الشاشة للهواتف المحمولة؛ مثل التباين، ودعم قارئ الشاشة، والتنقل عبر لوحة المفاتيح – استخدم أدوات مخصصة لتحسين إمكانية الوصول.
    • أخطاء في لغة جافا سكريبت على المتصفحات المخصصة للأجهزة المحمولة؛ فمتصفح سافاري على نظام iOS قد يتصرف أحيانًا بشكل مختلف عن إصدارات ويبكيت الأخرى.

الأسئلة الشائعة

فحوصات مماثلة، لكن بطريقة تنفيذ مختلفة؛ فقد أوقفت جوجل أداتها العامة في أواخر عام 2023. وتُجري أداة الاختبار هذه المجموعة نفسها من الفحوصات التقليدية التي كانت تستخدمها جوجل، على نسخة الصفحة التي يجلبها متصفح بلا واجهة.

نعم، قامت جوجل بتطبيق سياسة “التركيز على الأجهزة المحمولة” منذ عام 2020، مما يعني أن النسخة المُعرضة على الأجهزة المحمولة هي النسخة الرئيسية المستخدمة في تحديد الترتيبات. وغالبًا ما تؤثر المشكلات المتعلقة بالأجهزة المحمولة سلبًا على الترتيبات حتى عند إجراء عمليات بحث عبر الحواسيب المكتبية.

لا. يقوم جهاز الاختبار باسترجاع عناوين URL المتاحة للجميع فقط. أما بالنسبة للبيئة التجريبية المحمية، فيمكن إجراء الاختبار محليًا باستخدام وضع محاكاة الجهاز في أدوات تطوير كروم (Chrome DevTools).

القيمة الافتراضية هي 375×812 (آيفون 12/13/14)، ويمكن تهيئة الحجم إلى 390×844 (آيفون 14 برو)، أو 360×640 (أنظمة أندرويد الشائعة)، أو 412×915 (بيكسل 7).

عادةً ما يستغرق الأمر من 5 إلى 15 ثانية، حسب حجم الصفحة؛ فالصفحات الثقيلة التي تحتوي على عدد كبير من النصوص البرمجية تستغرق وقتًا أطول، وينتظر المختبر وقوع حدث التحميل بالإضافة إلى فترة خمول قصيرة قبل بدء الالتقاط.

أدوات ذات صلة

الأداة متاحة بلغات أخرى