ما هو
جدول بأعمدة كثيرة، أو مبني بأبعاد ثابتة بدلاً من مرنة، عريض بطبيعته — وهذا جيد على شاشة سطح مكتب، لكنه لا ينكمش ليلائم شاشة هاتف أضيق بكثير كما تفعل معظم المحتويات الأخرى في صفحة مبنية جيدًا. بدلاً من ذلك، إما أنه يجبر الصفحة بأكملها على التمرير أفقيًا أو يُضغط بشكل غير مريح ويصبح صعب القراءة.
لماذا يهم
التمرير الأفقي واحد من الأشياء الأكثر إزعاجًا التي قد يواجهها زائر على هاتف — إنه يكسر نمط التمرير العادي لأعلى ولأسفل الذي يتوقعه الناس في كل مكان آخر على الويب، ومن السهل حقًا تفويت محتوى يجلس خارج الشاشة مباشرة على اليمين دون إدراك وجوده على الإطلاق. على صفحة ملائمة تمامًا للجوال في كل شيء آخر، يمكن لجدول واحد عريض وغير ملفوف أن يكون الشيء الوحيد الذي يجعل التجربة بأكملها تبدو معطلة لزائر جوال.
كيفية الإصلاح
- حدد أي الجداول في موقعك بها أعمدة كثيرة أو بُنيت بعروض بكسل ثابتة بدلاً من مرنة.
- لفّ كل جدول عريض في حاوية بخاصية CSS
overflow-x: auto— يحافظ هذا على تخطيط الجدول نفسه سليمًا لكن يتيح للزائر تمرير ذلك الجدول فقط أفقيًا بحركة إصبع، بدلاً من تحريك الصفحة بأكملها. - بالنسبة للجداول ذات الأعمدة الكثيرة، فكّر بدلاً من ذلك في نمط جدول متجاوب — على سبيل المثال، تكديس كل صف في بطاقته الخاصة المُصنَّفة على الشاشات الضيقة بدلاً من الحفاظ على تخطيط الشبكة التقليدي بكل حجم.
- إذا كنت تستخدم أداة بناء مواقع، تحقق مما إذا كانت كتلة الجدول تمتلك بالفعل مفتاح تبديل "تمرير الجوال" أو "متجاوب" قبل بناء إصلاح مخصص.
- اختبر الإصلاح على شاشة هاتف ضيقة حقيقية (أو وضع معاينة الجوال في متصفحك)، وليس فقط بتغيير حجم نافذة متصفح سطح مكتب، لأن التمرير باللمس يتصرف بشكل مختلف عن الماوس.