التحقق من شاشة الهاتف المحمول: التأكد من عمل الوصول إلى الهاتف المحمول

في الوقت الحاضر، أكثر من 60% من زيارات الموقع الإلكتروني تأتي من الأجهزة المحمولة مثل الهواتف المحمولة - إذا تم عرض موقعك الإلكتروني بشكل غير صحيح على الهواتف المحمولة (مثل تداخل النصوص، الأزرار غير قابلة للنقر، الصور تتجاوز الشاشة)، سيؤدي ذلك مباشرة إلى فقدان المستخدم. التكيّف مع الهواتف المحمولة ليس "نقطة إضافية"، بل هو "أمر لا بد منه" لإطلاق الموقع الإلكتروني. سيعلمك هذا القسم 3 طرق للتحقق من تأثير عرض الهاتف المحمول، بالإضافة إلى كيفية إصلاح مشاكل التكيف الشائعة بسرعة، ويمكن للمبتدئين أيضًا العمل بسهولة.

أولاً: لماذا يجب تقييم عرض الهاتف المحمول؟ 3 معطيات رئيسية

• سلوك المستخدم78% من المستخدمين في جميع أنحاء العالم يتصفحون المواقع الإلكترونية على هواتفهم المحمولة، منهم 40% سيغلقون المواقع الإلكترونية ذات "التجربة السيئة على الهاتف المحمول".
• تفضيلات محرك البحثيستخدم كل من جوجل وبايدو "الفهرسة الأولى للجوّال" - أي أنهما يعطيان الأولوية للحكم على جودة الموقع الإلكتروني بناءً على محتوى نسخة الجوّال، وسيكون لتجربة الجوّال السيئة تأثير مباشر على التصنيفات.
• التأثير الانتقالي:: تتمتع مواقع الجوّال المكيّفة بشكل جيد بوقت مكوث أطول بمقدار 3 أضعاف من المواقع غير المكيّفة بشكل جيد، مع معدل تحويل أعلى بمقدار 501 تيرابايت في 3 تيرابايت للاستفسارات أو المشتريات.

ببساطةالمواقع الإلكترونية التي لا تُعرض بشكل صحيح على الهواتف المحمولة تتخلى فعلياً عن معظم مستخدميها وحركة المرور عليها。

ثانيًا، 3 طرق للتحقق من تأثير عرض الهاتف المحمول (من البسيط إلى الاحترافي)

الطريقة 1: الوصول المباشر من الهاتف المحمول (الاختبار الأكثر واقعية)

هذه هي الطريقة الأكثر سهولة لمحاكاة تجربة التصفح للمستخدمين الحقيقيين:

1. تم اختباره مع هواتف محمولة مختلفة: اختبرها على الأقل باستخدام 1-2 هاتف محمول سائد (مثل iPhone وHuawei وXiaomi)، حيث قد يختلف عرض المتصفح باختلاف العلامات التجارية للهواتف المحمولة.
2. اختبار الصفحة الأساسية:: التركيز على الصفحات التالية (الأكثر زيارة من قبل المستخدمين):
   • الصفحة الرئيسية: هل الصورة الدوارة معروضة بالكامل؟ هل يتم توسيع قائمة التنقل بشكل صحيح؟
   • صفحات المقالات: هل النص واضح (ليس ضبابيًا، وليس صغيرًا جدًا)؟ هل تمتد الصورة خارج الشاشة؟
   • صفحة الاتصال: هل أزرار النموذج قابلة للنقر؟ هل يكتب مربع الإدخال بشكل صحيح؟
   • قائمة التنقل: هل تصبح "قائمة همبرغر" (أيقونة ثلاثة خطوط أفقية) على الهواتف المحمولة؟ هل يمكن توسيعها عند النقر عليها؟
3. اختبار الانزلاق والنقر：
   • حرك الصفحة: هل هي سلسة؟ هل هناك أي تأخر أو اختلال في المحاذاة؟
   • النقر على الأزرار/الروابط: خاصة الأزرار الصغيرة (مثل "إرسال"، "شراء")، تأكد من إمكانية النقر عليها بدقة وعدم لمسها لعناصر أخرى عن طريق الخطأ.

الطريقة 2: محاكاة الهاتف المحمول باستخدام متصفح كمبيوتر (استكشاف الأخطاء وإصلاحها السريع)

ليس لديك هواتف محمولة متعددة؟ استخدم "أدوات المطور" في متصفح الكمبيوتر الخاص بك لمحاكاة طرازات مختلفة من الهواتف المحمولة، وهي مناسبة لتحديد موقع المشكلة بسرعة:

الخطوة 1: افتح أدوات مطور المتصفح

• كروم:: في صفحة الموقع الإلكتروني اضغط على F12 أو انقر بالزر الأيمن على "تحقق".
• متصفح Edge Browser:: يعمل مثل كروم (كلاهما له نفس النواة ولهما نفس التأثير).
• متصفح سفاري: تحتاج إلى تحديد "إظهار التطوير في شريط القوائم" في "التفضيلات ← متقدم" ثم انقر على "التطوير ← وضع التصميم التفاعلي".

الخطوة 2: التبديل إلى عرض الجوال

• في الزاوية العلوية اليسرى من أدوات المطور، ابحث عن "زر تبديل الجهاز" (مثل أيقونة الهواتف المحمولة وأجهزة الكمبيوتر)، انقر عليه وستتغير الصفحة إلى حجم شاشة هاتفك.
• اختر طراز هاتف شائع في الأعلى (مثل "iPhone 14" "Pixel 7")، أو أدخل عرض الشاشة فقط (مثل 375 بكسل، وهو عرض الهواتف السائدة).

الخطوة 3: دراسة القضايا الرئيسية

• التخطيط غير منظم:: هل النص متداخل؟ هل الصور مبتورة؟ هل الوحدات النمطية غير متناسقة؟
• حجم العنصر:: هل الأزرار والنصوص صغيرة جدًا (أقل من 12 بكسل يصعب قراءتها)؟
• شريط التمرير الأفقي:: ما إذا كانت أشرطة التمرير الأفقية تظهر في أسفل الصفحة (تشير إلى أن المحتوى يتجاوز عرض الشاشة ويحتاج إلى التثبيت).

الطريقة 3: الاختبار باستخدام أداة عبر الإنترنت (إنشاء تقرير احترافي)

الأداة الموصى بها:اختبار التوافق مع الجوّال من جوجل(أدوات جوجل الرسمية، مجانًا)

الموقع الرسمي:https://search.google.com/test/mobile-friendly

الخطوة 1: اكتشاف عنوان URL الإدخال

املأ مربع الإدخال بعنوان الصفحة الرئيسية لموقعك الإلكتروني (على سبيل المثال https://example.comانقر على "اختبار عنوان URL" وانتظر من دقيقة إلى دقيقتين حتى يتم إنشاء التقرير.

الخطوة 2: تفسير نتائج التقرير

• اجتياز اختبار:: يتم عرض عبارة "الصفحة مناسبة للأجهزة المحمولة"، مما يعني أن التكييف الأساسي جيد.
• فشل في الاختبار: يتم إدراج مشاكل محددة (على سبيل المثال "نص صغير جدًا للقراءة" "النقر على عنصر قريب جدًا") ويتم تسمية موقع المشكلة (انقر عليها لرؤية لقطة شاشة).

ثالثاً، مشاكل وحلول التكيف الشائعة في الهاتف المحمول

المشكلة 1: النص صغير جدًا أو غير واضح (لا يمكن قراءة المحتوى)

• الأساس المنطقي: لم يتم تعيين القالب بخطوط متجاوبة (حجم بكسل ثابت، على سبيل المثال font-size: 12px(والتي ستظهر صغيرة على الهاتف المحمول).
• تسوية (نزاع)：
  1. إذا كان التحرير في Elementor: حدد وحدة النص وفي "الإعدادات المتجاوبة" (انقر على أيقونة الهاتف المحمول)، اضبط حجم الخط إلى 16 بكسل أو أكثر.
  2. الطريقة العامة: ثبِّت الإضافة "CSS وJS المخصص البسيط"، وأضف الكود التالي (اضبط الخط على التكيف):

@media (max-width: 768px) {
  body { font-size: 16px !important; }
  h1 { font-size: 24px !important; }
  h2 { font-size: 20px !important; }
}

المشكلة 2: تتجاوز الصورة/الفيديو الشاشة (يظهر شريط تمرير أفقي)

• الأساس المنطقي:: عرض الصورة ثابت (على سبيل المثال مضبوط على "800 بكسل") ويتجاوز عرض شاشة الهاتف المحمول (عادةً ما يكون 375-414 بكسل).
• تسوية (نزاع)：
  1. تأكّد من أن الصورة "عرض متكيف": في شاشة تحرير الصورة، اضبط العرض على "100%" (بدلاً من البكسل الثابت).
  2. عند استخدام Elementor: حدد الوحدة النمطية للصور، وحدد "متجاوب" في "النمط → العرض"، وقم بإلغاء العرض الثابت.
  3. إصلاح دفعة: إضافة كود CSS لإجبار الصور على التكيف:img { max-width: 100% !important; height: auto !important; }

المشكلة 3: الأزرار/الروابط صغيرة جدًا ويسهل النقر عليها بالخطأ.

• الأساس المنطقي:: أزرار أصغر من 44×44 بكسل (الحد الأدنى لمساحة النقر الموصى بها رسميًا من Apple) ومتقاربة جدًا من بعضها البعض.
• تسوية (نزاع)：
  1. تحرير الأزرار: في Elementor أو إعدادات القالب، اضبط "الحد الأدنى للعرض" على 44 بكسل و"التباعد" على 10 بكسل أو أكثر.
  2. رمز الإصلاح الطارئ

.button, a { 
  min-width: 44px !important; 
  min-height: 44px !important; 
  margin: 5px 0 !important;
}

المشكلة 4: لا تظهر قوائم التنقل أو لا يتم توسيعها على الهواتف المحمولة

• الأساس المنطقي:: لم يتم تمكين وظيفة قائمة الهاتف المحمول الخاصة بالقالب أو أن تعارض JavaScript يمنع إمكانية النقر على القائمة.
• تسوية (نزاع)：
  1. تحقَّق من إعدادات القالب: انتقل إلى "المظهر ← تخصيص ← التنقل" وتأكَّد من تمكين "قائمة الهاتف المحمول" (عادةً ما يكون نمط "قائمة همبرغر").
  2. استكشاف أخطاء تعارض المكونات الإضافية وإصلاحها: قم بتعطيل جميع المكونات الإضافية مؤقتًا واختبر ما إذا كانت القائمة قد عادت إلى وضعها الطبيعي (إذا عادت، قم بتمكين المكونات الإضافية واحدة تلو الأخرى للعثور على المكون المتعارض).
  3. استبدل المكون الإضافي للتنقل: إذا كانت قائمة القالب أكثر إشكالية، يمكنك تثبيت مكون إضافي خاص بقائمة الهاتف المحمول (مثل "Max Mega Menu") للتكيف تلقائيًا مع الهواتف المحمولة.

رابعًا، يجب أن يعرف المبتدئ مبادئ تحسين الأجهزة المحمولة

1. التفكير التصميمي "المحمول أولاً": عند إنشاء موقع ويب، ضع في اعتبارك عرض الهاتف المحمول قبل تكييفه مع الكمبيوتر (وليس العكس). عند التحرير باستخدام Elementor، انقر على "أيقونة الهاتف المحمول" لتعيين نمط الهاتف المحمول أولاً، ثم اضبط نمط سطح المكتب.
2. تبسيط المحتوى للجوال: تحتوي الهواتف المحمولة على شاشات صغيرة ولا تحتاج إلى إظهار كل محتوى الكمبيوتر (على سبيل المثال يمكنك إخفاء الأشرطة الجانبية المعقدة والاحتفاظ فقط بالملاحة والمحتوى الأساسي).
3. الاختبار المنتظم: في كل مرة تقوم فيها بتحديث قالب أو إضافة أو نشر محتوى جديد، قم بمراجعة سريعة لهاتفك المحمول لتجنب تعطل المحتوى الجديد.

قصير

يتمثل جوهر فحص عرض الهاتف المحمول في "وضع نفسك مكان المستخدم": تخيل نفسك وأنت تتصفح موقعًا إلكترونيًا على هاتفك المحمول، وما إذا كان بإمكانك قراءة المحتوى والنقر على الأزرار والعثور على المعلومات بسهولة. من خلال اختبار الهاتف المحمول ومحاكاة المتصفح والأدوات عبر الإنترنت، يمكننا تغطية أكثر من 90% مشاكل التكيف مع الهاتف المحمول، بينما يمكن إصلاح المشاكل الشائعة (مثل الخطوط والصور والأزرار) بسرعة باستخدام إعدادات أو أكواد بسيطة.

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