كيفية إصلاح خطأ “العناصر القابلة للنقر قريبة جدًا من بعضها البعض” (3 طرق)

A VPN is an essential component of IT security, whether you’re just starting a business or are already up and running. Most business interactions and transactions happen online and VPN

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

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

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

هيا بنا إلى العمل!

ما هو خطأ “العناصر القابلة للنقر قريبة جدًا من بعضها البعض”

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

أداة تقرير استخدام Google Search Console للجوال.

أداة تقرير استخدام Google Search Console للجوال

هناك ستة أنواع رئيسية من مشكلات قابلية استخدام الأجهزة المحمولة التي قد تواجهها ، وهي:

يستخدم ملحقات غير متوافقة

منفذ العرض غير معين

لم يتم تعيين منفذ العرض على “عرض الجهاز”

نص صغير جدا للقراءة

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

العناصر القابلة للنقر قريبة جدًا من بعضها

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

إذا حددت Google Search Console أن العناصر القابلة للنقر تشكل تحديًا لمستخدمي الجوال ، فستتضمن الخطأ “العناصر القابلة للنقر قريبة جدًا من بعضها البعض” في تقرير الملخص الخاص بك.

تقرير مشكلات قابلية الاستخدام على الأجهزة المحمولة من Google Search Console.

تقرير مشكلات قابلية الاستخدام على الأجهزة المحمولة من Google Search Console

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

خطأ “العناصر القابلة للنقر قريبة جدًا من بعضها البعض” في Google Search Console.

خطأ “العناصر القابلة للنقر قريبة جدًا من بعضها البعض” في Google Search Console

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

بدلاً من ذلك ، قد يعني ذلك أنها كبيرة بما يكفي ، لكنها قريبة جدًا من العناصر المجاورة. إذا كانت الأزرار والروابط والعناصر الأخرى القابلة للنقر متقاربة جدًا من بعضها البعض ، فإن المستخدمين يخاطرون بالنقر على العناصر الخاطئة ، مما يضر بتجربة المستخدم (UX).

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

يمكن أن يكون لقضايا قابلية استخدام الأجهزة المحمولة التي لم يتم حلها تأثير كبير على حركة مرور موقع الويب الخاص بك 📉 ابحث عن الحل هنا وحافظ على حركة المرور الخاصة بك على المسار الصحيح ⬇️

انقر للتغريد

لماذا قد يظهر خطأ “العناصر القابلة للنقر قريبة جدًا من بعضها البعض”

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

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

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

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

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

كيفية إصلاح خطأ “العناصر القابلة للنقر قريبة جدًا من بعضها البعض” (3 طرق)

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

1. استخدم البرنامج الإضافي YellowPencil Visual Customizer وورد بريس

YellowPencil Visual Customizer  عبارة عن مكون إضافي لبرنامج وورد بريس يمكّنك من تحرير ملفات CSS وملفات السمات الخاصة بموقعك دون أي ترميز.

البرنامج المساعد YellowPencil Visual Customizer وورد بريس.

البرنامج المساعد YellowPencil Visual Customizer وورد بريس

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

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

خيار تثبيت المكون الإضافي YellowPencil في وورد بريس.

خيار تثبيت المكون الإضافي YellowPencil في وورد بريس

بعد ذلك ، انتقل إلى YellowPencil >  التخصيصات . ضمن علامة التبويب  التخصيصات ، حدد لنبدأ!

صفحة “تخصيصات” المكون الإضافي لـ YellowPencil وورد بريس.

صفحة “تخصيصات” المكون الإضافي لـ YellowPencil وورد بريس

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

واجهة البرنامج المساعد YellowPencil Visual Customizer.

واجهة البرنامج المساعد YellowPencil Visual Customizer

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

حدد اختيارك ، ثم انقر فوق متابعة. يمكنك الآن العمل في طريقك من خلال صفحة الويب الخاصة بك ، وتحديد كل عنصر يمكن النقر عليه. سيعرض YellowPencil لوحة من خيارات التحرير لهذا العنصر.

خيارات CSS للمخصص المرئي YellowPencil للعناصر القابلة للنقر.

خيارات CSS للمخصص المرئي YellowPencil للعناصر القابلة للنقر

على سبيل المثال ، في لقطة الشاشة أدناه ، اخترنا الحشو  وأضفنا 10 بكسل من جميع الجوانب لزيادة المساحة بين الأهداف القابلة للنقر:

إعدادات المساحة المتروكة في أداة التخصيص المرئية للمكوّن الإضافي YellowPencil.

إعدادات المساحة المتروكة في أداة التخصيص المرئية للمكوّن الإضافي YellowPencil

و الحجم و الوظيفة الإعدادات أيضا المساعدة على حل “العناصر القابلة للنقر عليها قريبة جدا معا” خطأ. على الرغم من أنه ليس ضروريًا ، إذا كنت ترغب في تعديل كود CSS مباشرةً ، يمكنك القيام بذلك من خلال اللوحة اليمنى.

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

2. تأكد من أن جميع الأهداف القابلة للنقر عليها 48 بكسل على الأقل

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

على جهاز محمول ، الحد الأدنى لهدف اللمس الموصى به هو 48 × 48 بكسل . وهي تعادل حوالي 9 مم ، وهو ما يكفي لسادة إصبع الشخص العادي.

لذلك ، إذا كنت تكافح لمعرفة العناصر التي هي مصدر المشكلة بالضبط ، فقد يساعدك ذلك في النظر في نقطة لكل عنصر. إذا كان أقل من هدف اللمس الموصى به (على سبيل المثال 24 بكسل) ، فيمكنك زيادة المساحة المتروكة لجعلها تصل إلى 48 بكسل.

يمكنك التحقق من القيمة المحسوبة لمنطقة قابلة للنقر باستخدام Chrome DevTools  أو Firefox DevTools ، اعتمادًا على المتصفح الذي تفضله . سنستخدم Chrome كمثال.

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

خيار “فحص” في متصفح Chrome.

خيار “فحص” في متصفح Chrome

سيؤدي النقر فوق فحص إلى فتح Chrome DevTools. في الجزء العلوي ، انقر فوق الرمز الذي يعرض الأجهزة المحمولة ، والذي سينقلك إلى  شاشة شريط أدوات تبديل الجهاز .

خيار “تبديل شريط أدوات الجهاز” في Chrome DevTools.

خيار “تبديل شريط أدوات الجهاز” في Chrome DevTools

في لوحة المعاينة اليسرى ، سترى محاكاة جهاز محمول لموقعك. إذا قمت بالتمرير فوق أي عنصر من العناصر القابلة للضغط عليها والنقر فوقها ، فيمكنك عرض القيمة المحسوبة إلى اليمين:

وحدة تحكم Google Chrome DevTools.

وحدة تحكم Google Chrome DevTools

إذا لزم الأمر ، يمكنك بعد ذلك ضبط حجم عنصر عن طريق تحرير ملفات CSS والموقع مباشرة أو باستخدام مكون إضافي مثل YellowPencil.

تريد أن تعرف كيف زدنا من حركة المرور لدينا أكثر من 1000 ٪؟

انضم إلى أكثر من 20000 آخرين ممن يتلقون رسائلنا الإخبارية الأسبوعية مع نصائح من الداخل حول وورد بريس!

إشترك الآن

3. تحقق من طريقة الإدخال

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

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

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

تقريبي : أسلوب الإدخال الأساسي للجهاز هو اللمس.

حسنًا : طريقة الإدخال عبارة عن الماوس ولوحة التتبع.

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

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

إذا أرجع المؤشر قيمة تقريبية ، فيمكنك ضبط حجم الهدف القابل للنقر باستخدام CSS. للقيام بذلك ، يمكنك وضع ما يلي في ملف CSS لقالب وورد بريس الخاص بك (أو باستخدام مكون إضافي مثل YellowPencil):

.container a {
  padding: .2em;
}
@media (pointer: coarse) {
  .container a {
    padding: .8em;
  }
}

بعد ضبط CSS الخاص بك ، يمكنك إخبار Google بإعادة الزحف  إلى موقع الويب الخاص بك لتحديد ما إذا كان هذا قد أدى إلى حل المشكلة.

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

بافتراض أن محرك بحث Google لم يعثر على أية مشكلات ، فستتأهل الصفحة بعد ذلك للفهرسة.

Google Search Console تضع الصفحة المطلوبة في قائمة انتظار للفهرسة.

Google Search Console تضع الصفحة المطلوبة في قائمة انتظار للفهرسة

بدلاً من ذلك ، إذا كان لديك عدد كبير من عناوين URL ، فيمكنك إرسال خريطة الموقع. لكل صفحة تتطلب إعادة الفهرسة ، قم بتحديث  علامة <lastmod> الخاصة بها بتاريخ التعديل الأخير. يمكنك بعد ذلك إرسال خريطة الموقع هذه باستخدام  أداة تقرير خريطة الموقع من Google .

إرسال خريطة الموقع من خلال ادوات مشرفى المواقع.

إرسال خريطة الموقع من خلال ادوات مشرفى المواقع

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

ما هو خطأ “المحتوى أوسع من الشاشة”

كما قد تتذكر ، قد تحذرك Google Search Console من العديد من أخطاء قابلية الاستخدام على الأجهزة المحمولة. علاوة على “العناصر القابلة للنقر قريبة جدًا من بعضها البعض” ، يمكن أن يتضمن تقرير الملخص أيضًا مشكلة “المحتوى أوسع من الشاشة”.

هل سئمت من مواجهة مشكلات مع موقع وورد بريس الخاص بك؟ احصل على أفضل وأسرع دعم استضافة مع Kinsta! تحقق من خططنا

خطأ “المحتوى أعرض من الشاشة” في Google Search Console.

خطأ “المحتوى أعرض من الشاشة” في Google Search Console

ستظهر هذه المشكلة في نفس المكان في Google Search Console حيث تظهر رسالة الخطأ “عناصر قابلة للنقر”. وبالمثل ، فإن له مجموعة متنوعة من الأسباب المحتملة.

كيفية إصلاح خطأ “المحتوى أوسع من الشاشة”
لماذا قد يظهر خطأ “المحتوى أوسع من الشاشة”

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

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

كيفية إصلاح خطأ “المحتوى أوسع من الشاشة” (5 طرق)

إذا تضمن تقريرك الخطأ “المحتوى أعرض من الشاشة” ، يمكنك استخدام بعض الطرق البسيطة لحلها. دعنا نلقي نظرة على خمسة من أكثر الخيارات شيوعًا.

1. تجنب استخدام المتغيرات المطلقة في تعريفات CSS

تتمثل إحدى أفضل الطرق لإصلاح الخطأ “المحتوى أعرض من الشاشة” في تجنب استخدام المتغيرات المطلقة في إعلانات CSS الخاصة بك. يجب ألا يتطلب المحتوى الخاص بك منفذ عرض محددًا ليتم عرضه وتشغيله بشكل صحيح.

لذلك ، بدلاً من استخدام القيم المطلقة ، يجب عليك اختيار قيم العرض والموضع النسبية لعناصر CSS الخاصة بك. باستخدام القيم النسبية حيثما أمكن ، يمكنك إنشاء تخطيطات مرنة تتناسب مع نطاق من أحجام الشاشات.

2. قم بتعيين أقصى عرض للصور

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

سيجبر الصورة على تقليص لتناسب المساحة المتاحة. حتى إذا كنت تستخدم max-width، فلا يزال يتعين عليك استخدام سمات العرض والارتفاع في علامتك <image>، حيث تستخدم متصفحات الويب الحديثة هذه المعلومات لحجز مساحة للصور أثناء تحميلها. باستخدام <image>العلامة ، يمكنك تجنب تحولات التخطيط عندما تظهر صورك أخيرًا على الشاشة.

3. استخدم علامات Meta Viewport

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

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

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

4. استخدم تقنيات تخطيط CSS الحديثة

يمكنك أيضًا إصلاح الخطأ “المحتوى أعرض من الشاشة” عن طريق تبديل تخطيط موقعك. لمساعدتك في إنشاء تخطيطات أكثر مرونة ، قد ترغب في التفكير في تنفيذ تقنيات مثل Flexbox أو CSS Grid Layout أو Multi-Column Layout  (Multicol).

5. استخدم استعلامات وسائط CSS حيثما كان ذلك مناسبًا

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

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

كيفية التحقق والتحقق من حل الخطأ

بغض النظر عن الأخطاء المذكورة أعلاه التي تتعامل معها أو الطرق التي تستخدمها لإصلاحها ، فمن الضروري تحديد ما إذا كانت التغييرات التي أجريتها قد أدت إلى حل المشكلة أم لا. يمكنك القيام بذلك عن طريق إعادة تشغيل اختبارات قابلية استخدام الهاتف المحمول من Google.

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

لاحظ أنه يمكنك تكرار هذه الخطوات نفسها إذا كنت تحاول التحقق من دقة الخطأ والتحقق منها لـ “المحتوى أعرض من الشاشة”. ستقوم Google بعد ذلك بالزحف إلى موقع الويب الخاص بك ، وستتلقى رسالة تخبرك أنه في طور التحقق من صحة التغيير.

رسالة تحديث التحقق من Google Search Console.

رسالة تحديث التحقق من Google Search Console

إذا قمت بحل الخطأ ، فستعرض Google Search Console رسالة “تم اجتياز الخطأ” وعلامة اختيار خضراء مصاحبة. من ناحية أخرى ، إذا لم يتم التحقق من صحة الإصلاحات التي استخدمتها ، فسيتعين عليك إعادة النظر في الخطأ لتنفيذ حل بديل.

يصل 4.32 مليار شخص إلى الإنترنت من أجهزتهم المحمولة … مما يعني أنه من الضروري حل هذا الخطأ الشائع بسرعة! 😅 لحسن الحظ ، هذا الدليل موجود للمساعدة

انقر للتغريد

ملخص

يمكن أن تؤدي أخطاء قابلية استخدام الأجهزة المحمولة التي لم يتم حلها إلى تجربة مستخدم سيئة وقد تتسبب في انخفاض ملحوظ في حركة المرور على موقع الويب الخاص بك . من خلال اتخاذ خطوات لحل أخطاء قابلية الاستخدام ، يمكنك التأكد من أن موقع الويب الخاص بك مناسب للجوال ويمكن لمجموعة أكبر من الأشخاص الوصول إليه.

في هذا المنشور ، تعلمت كيفية إصلاح الخطأ “العناصر القابلة للنقر قريبة جدًا من بعضها البعض” باستخدام ثلاث طرق:

قم بتعديل موقع الويب الخاص بك باستخدام ملحق محرر نمط CSS للواجهة الأمامية (مثل YellowPencil).

استخدم Chrome DevTools للتأكد من أن جميع الأهداف القابلة للنقر تبلغ 48 نقطة في البوصة أو أكبر.

تحقق من طريقة الإدخال واضبط CSS وفقًا لذلك.

توضيح

اي عملية نسخ او اقتباس او ترجمة او نقل تم لاغراض علمية وتدريبية وتعليمية بحته وقد تم انشاء هذا المحتوى بمعرفة خبراء في مجال التقنية اما عن طريق إنشاء او تحرير او نقل او نسخ او اقتباس او ترجمة المحتوى من مصادر خاصة او عامة وكل ذلك ضمن حقوق النشر المتعارف عليها.

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

شاركنا رايك وتقييمك للموضوع

{{ reviewsTotal }}{{ options.labels.singularReviewCountLabel }}
{{ reviewsTotal }}{{ options.labels.pluralReviewCountLabel }}
{{ options.labels.newReviewButton }}
{{ userData.canReview.message }}