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