مدقق مجاني للتوافق مع الجوال
افتح صفحتك في متصفح حقيقي بمقاسات سطح المكتب والجهاز اللوحي والهاتف، وشاهد لقطة شاشة لكل منها، واعرف ما إذا كانت مهيأة لشاشات الجوال أم أنها تفيض عن الجانب وتجبر الزوار على التمرير أفقيًا.
ما الذي تفحصه هذه الأداة
وسم viewport
ما إذا كانت الصفحة تحتوي على وسم viewport meta. وبدونه تعرض الهواتف تخطيط سطح المكتب مصغّرًا بنص صغير جدًا.
محتوى أعرض من الشاشة
ما إذا كانت الصفحة أعرض من الشاشة في كل مقاس، مما يسبب التمرير الأفقي وقطع المحتوى.
ثلاثة مقاسات للشاشة
سطح المكتب (1280×800)، والجهاز اللوحي (768×1024)، والهاتف (390×844)، مع محاكاة متصفح الجوال في عرضي الجهاز اللوحي والهاتف.
لقطات الشاشة
لقطة للشاشة الأولى في كل مقاس، لترى ما يراه الزوار.
مشكلات التحميل
ما إذا فشل تحميل الصفحة أو انتهت مهلته في أي من المقاسات.
كيف يعمل الفحص
نحمّل صفحتك في Chromium ثلاث مرات — مرة لكل مقاس شاشة — وننتظر اكتمال تحميلها، ثم نقيس ما إذا كانت الصفحة أعرض من الشاشة ونلتقط لقطة شاشة. يستخدم عرضا الجهاز اللوحي والهاتف محاكاة الجوال مع شاشة عالية الكثافة.
تبدأ النتيجة من 100: غياب وسم viewport يكلّف 20 نقطة، وكل مقاس شاشة فيه فيض أفقي يكلّف 15، ومشكلات التحميل تكلّف 10.
لا يقيس هذا الفحص السريع حجم أهداف النقر أو حجم الخط أو العناصر المتداخلة. ويمكن للمستخدمين المسجّلين تشغيل اختبار تخطيط أعمق على ما يصل إلى ثمانية ملفات تعريف للأجهزة يبحث عن هذه المشكلات أيضًا.
مشكلات شائعة نكتشفها
لا يوجد وسم viewport
شائع في المواقع القديمة والصفحات المبنية يدويًا؛ فيبدو عرض الهاتف كصفحة سطح مكتب مصغّرة.
عناصر بعرض ثابت
حاويات أو جداول أو عناصر مضمّنة مضبوطة على عرض ثابت بالبكسل أكبر من شاشة الهاتف.
صور ومقاطع فيديو لا تتقلص
وسائط بلا max-width: 100%، تجعل الصفحة أعرض من الشاشة.
جداول عريضة
جداول الأسعار أو المقارنة ذات الأعمدة الكثيرة.
نص طويل غير منقسم
عناوين URL طويلة أو عناوين بريد إلكتروني أو شيفرة لا يمكن أن تلتف إلى السطر التالي.
كيفية إصلاحها
أضف وسم viewport
ضع <meta name="viewport" content="width=device-width, initial-scale=1"> في ترويسة الصفحة. ومعظم القوالب الحديثة تتضمنه بالفعل.
استخدم عروضًا مرنة
استبدل العروض الثابتة بالبكسل بـ max-width والنسب المئوية، واستخدم CSS grid أو flexbox لتلتف التخطيطات على الشاشات الصغيرة.
اجعل الوسائط تتقلص لتناسب الشاشة
في CSS، أعطِ الصور ومقاطع الفيديو وعناصر iframe القيمتين max-width: 100% وheight: auto.
اجعل الجداول العريضة تتمرر داخل إطارها
ضع الجداول داخل حاوية بها overflow-x: auto، أو رتّب الأعمدة فوق بعضها على الشاشات الصغيرة.
اسمح بتقسيم الكلمات الطويلة
استخدم overflow-wrap: anywhere في مناطق النص التي قد تحتوي على عناوين URL طويلة.
الأسئلة الشائعة
هل يختبر على هواتف حقيقية؟
لا. يستخدم متصفح Chromium حقيقيًا مضبوطًا على مقاسات شاشات الهاتف والجهاز اللوحي مع محاكاة الجوال. وهذا يكتشف مشكلات التخطيط بشكل موثوق، لكنه ليس مطابقًا لكل هاتف ومتصفح، خاصةً Safari على iPhone.
هل هذا هو نفسه اختبار Google للتوافق مع الجوال؟
لا. أوقفت Google اختبار التوافق مع الجوال المستقل في عام 2023. أما فحصنا فينظر في اثنين من أكثر أسباب ضعف تخطيط الجوال شيوعًا — غياب وسم viewport والمحتوى الأعرض من الشاشة — ويعرض لك لقطات شاشة.
لماذا تعرض لقطات الشاشة الجزء العلوي من الصفحة فقط؟
نلتقط الشاشة الأولى في كل مقاس، وهي ما يراه الزوار قبل التمرير. أما فحص الفيض فيقيس عرض الصفحة بالكامل.
هل يفحص سرعة موقعي على الجوال؟
لا. استخدم مدقق السرعة لذلك — إذ يحاكي Lighthouse افتراضيًا هاتفًا متوسط الفئة على اتصال جوال.
نتيجتي 100. هل موقعي مثالي على الجوال؟
يعني ذلك أن الصفحة تحتوي على وسم viewport ولا شيء يفيض خارج الشاشة في المقاسات الثلاثة التي نختبرها. أما الأزرار الأصغر من أن تُنقر أو النص الأصغر من أن يُقرأ فتحتاج إلى نظرة أدق، أو إلى اختبار التخطيط الأعمق المتاح للمستخدمين المسجّلين.
أدلة مفيدة
أدوات مجانية ذات صلة
- مدقق سرعة الموقعحمّل صفحتك في متصفح حقيقي باستخدام Lighthouse واعرف مدى سرعة ظهور محتواها واستجابتها.افتح مدقق سرعة الموقع
- مدقق إمكانية الوصولاختبر صفحتك باستخدام axe-core بحثًا عن العوائق الشائعة مثل غياب التسميات والتباين المنخفض وغياب أوصاف الصور.افتح مدقق إمكانية الوصول
- تدقيق الموقعافحص صفحة واحدة بحثًا عن مشكلات SEO والسرعة والجوال وإمكانية الوصول والأمان والروابط المعطّلة والخادم في تقرير واحد.افتح تدقيق الموقع
تفضّل أن يصلحها أحد نيابةً عنك؟
هذه الفحوص مجانية وكذلك الأدلة. وإذا كنت تفضّل أن يُجري شخص التغييرات، يقدم فريقنا مساعدة مدفوعة.