Rudra Analyzer

مدقق مجاني للتوافق مع الجوال

افتح صفحتك في متصفح حقيقي بمقاسات الهاتف والجهاز اللوحي وسطح المكتب، واعرف هل هي مهيأة لشاشات الجوال: هل وسم viewport صحيح، وهل يستطيع الناس التكبير، وما العناصر التي تتجاوز الحافة وتجبر الزوار على التمرير أفقيًا.

أدخل صفحة واحدة، مثل https://yourwebsite.com أو https://yourwebsite.com/pricing.

ما الذي تفحصه هذه الأداة

  • وسم viewport

    هل للصفحة وسم viewport meta، وهل يستخدم width=device-width، وهل يمنع التكبير عبر user-scalable=no أو قيمة maximum-scale أقل من 2.

  • محتوى أعرض من الشاشة

    هل الصفحة أعرض من الجهاز في كل مقاس، مقيسةً بعرض الشاشة الحقيقي، مع ما يصل إلى خمسة من العناصر البارزة ومقدار بروزها.

  • ثلاثة مقاسات للشاشة

    الهاتف (375×667) والجهاز اللوحي (768×1024) وسطح المكتب (1440×900)، مع محاكاة متصفح جوال في عرضَي الهاتف والجهاز اللوحي.

  • لقطات الشاشة

    لقطة شاشة للشاشة الأولى على الهاتف، إضافةً إلى لقطة شاشة لأي مقاس وجدنا فيه مشكلة.

  • مشكلات التحميل

    ما إذا فشل تحميل الصفحة أو انتهت مهلته في أي من المقاسات.

كيف يعمل الفحص

نحمّل صفحتك في Chromium ثلاث مرات — مرة لكل مقاس شاشة — وننتظر اكتمال تحميلها، ثم نقارن عرض الصفحة بعرض الجهاز الحقيقي ونلتقط لقطات الشاشة حيث تفيد. تُوسّع متصفحات الجوال التخطيط بصمت ليتسع للمحتوى العريض جدًا، لذا نقيس مقابل عرض الجهاز بدلًا من viewport الخاص بالمتصفح، الذي قد يخفي المشكلة.

تبدأ النتيجة من 100: غياب وسم viewport يكلّف 20 نقطة، وviewport دون width=device-width يكلّف 10، وviewport يمنع التكبير 5، وكل مقاس شاشة فيه فيض أفقي 15، ومشكلات التحميل 10.

لا يقيس هذا الفحص السريع حجم أهداف اللمس ولا حجم النص ولا العناصر المتداخلة. ويستطيع المستخدمون المسجّلون تشغيل اختبار تخطيط أعمق على عدة ملفات تعريف للهاتف والجهاز اللوحي وسطح المكتب، يبحث أيضًا عن حقول النماذج الصغيرة بما يكفي لجعل الهواتف تكبّر الصفحة، وعن قوائم التنقل التي تتجاوز الشاشة.

الأدلة التي ستراها

ترى لكل مقاس شاشة هل نجح وعرض الصفحة الذي قسناه. وتسمّي ملاحظات الفيض العناصر البارزة (محدِّد CSS الخاص بها وعرضها مقابل عرض الشاشة)، وتقتبس ملاحظات viewport الوسم كما هو بالضبط، وتُظهر لقطات الشاشة شكل المشكلة.

ما لا تفحصه هذه الأداة

  • الهواتف الحقيقية وكل المتصفحات

    تستخدم Chromium مع محاكاة الجوال. وقد يتصرف Safari على iPhone ومتصفحات Android الأقدم بشكل مختلف.

  • أهداف اللمس وحجم النص والتداخل

    الأزرار الصغيرة جدًا، والنص الأصغر من أن يُقرأ، والعناصر التي تغطي بعضها تحتاج إلى اختبار التخطيط الأعمق أو إلى فحص يدوي.

  • السرعة على الجوال

    تُقاس سرعة التحميل على الهاتف بواسطة مدقق السرعة، لا هنا.

  • القوائم والتفاعلات

    لا يُلمس أي شيء ولا يُفتح، لذا لا تُجرَّب القوائم والنوافذ المنبثقة والنماذج.

مشكلات شائعة نكتشفها

  • لا يوجد وسم viewport، أو يوجد وسم يمنع التكبير

    كثيرًا ما تفتقر المواقع القديمة إلى وسم viewport، فتعرض الهواتف صفحة سطح مكتب مصغّرة؛ وتضبط مواقع أخرى user-scalable=no، مما يمنع ضعاف البصر من التكبير.

  • عناصر بعرض ثابت

    حاويات أو جداول أو عناصر مضمّنة مضبوطة على عرض ثابت بالبكسل أكبر من شاشة الهاتف.

  • صور ومقاطع فيديو لا تتقلص

    وسائط بلا max-width: 100%، تجعل الصفحة أعرض من الشاشة.

  • جداول عريضة

    جداول الأسعار أو المقارنة ذات الأعمدة الكثيرة.

  • نص طويل غير منقسم

    عناوين URL طويلة أو عناوين بريد إلكتروني أو شيفرة لا يمكن أن تلتف إلى السطر التالي.

كيفية إصلاحها

  1. أصلح وسم viewport

    ضع '<'meta name="viewport" content="width=device-width, initial-scale=1"> في head الصفحة، واحذف user-scalable=no وmaximum-scale=1.

  2. استخدم عروضًا مرنة

    استبدل العروض الثابتة بالبكسل بـ max-width والنسب المئوية، واستخدم CSS grid أو flexbox لتلتف التخطيطات على الشاشات الصغيرة.

  3. اجعل الوسائط تتقلص لتناسب الشاشة

    في CSS، أعطِ الصور ومقاطع الفيديو وعناصر iframe القيمتين max-width: 100% وheight: auto.

  4. اجعل الجداول العريضة تتمرر داخل إطارها

    ضع الجداول داخل حاوية بها overflow-x: auto، أو رتّب الأعمدة فوق بعضها على الشاشات الصغيرة.

  5. اسمح بتقسيم الكلمات الطويلة

    استخدم overflow-wrap: anywhere في مناطق النص التي قد تحتوي على عناوين URL طويلة.

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

هل يختبر على هواتف حقيقية؟

لا. يستخدم متصفح Chromium حقيقيًا مضبوطًا على مقاسات شاشات الهاتف والجهاز اللوحي مع محاكاة الجوال. وهذا يكتشف مشكلات التخطيط بشكل موثوق، لكنه ليس مطابقًا لكل هاتف ومتصفح، خاصةً Safari على iPhone.

هل هذا هو نفسه اختبار Google للتوافق مع الجوال؟

لا. أوقفت Google اختبار التوافق مع الجوال المستقل في عام 2023. أما فحصنا فينظر في اثنين من أكثر أسباب ضعف تخطيط الجوال شيوعًا — غياب وسم viewport والمحتوى الأعرض من الشاشة — ويعرض لك لقطات شاشة.

لماذا لا أحصل على لقطة شاشة لكل مقاس؟

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

هل يفحص سرعة موقعي على الجوال؟

لا. استخدم مدقق السرعة لذلك — إذ يحاكي Lighthouse افتراضيًا هاتفًا متوسط الفئة على اتصال جوال.

نتيجتي 100. هل موقعي مثالي على الجوال؟

يعني أن للصفحة وسم viewport صحيحًا يسمح بالتكبير وأن لا شيء يتجاوز الشاشة في المقاسات الثلاثة التي نختبرها. أما الأزرار الأصغر من أن تُلمس أو النص الأصغر من أن يُقرأ فتحتاج إلى نظرة أدق، أو إلى اختبار التخطيط الأعمق المتاح للمستخدمين المسجّلين.

أدلة مفيدة

أدوات مجانية ذات صلة

تفضّل أن يصلحها أحد نيابةً عنك؟

هذه الفحوص مجانية وكذلك الأدلة. وإذا كنت تفضّل أن يُجري شخص التغييرات، يقدم فريقنا مساعدة مدفوعة.

اطّلع على خيارات المساعدة الاحترافيةكيف نختبر ونقيّمكل الأدوات المجانية