الموقع الإلكتروني يظهر مشوّهًا على الهاتف وطبيعيًا على الحاسوب: لماذا؟

29 Ağustos 2026

قد يظهر موقع إلكتروني نظيفًا تمامًا على الحاسوب بينما يتفكّك حين يُفتح على الهاتف: تفيض النصوص من صناديقها، وتخرج الصور عن حدود الشاشة، ولا تنفتح القائمة، ويصعب الضغط على الأزرار بالإصبع، وتنزلق الصفحة يمينًا ويسارًا، وتتراكب الأقسام بعضها فوق بعض. وهذا لا ينشأ من كون الهاتف «معطوبًا»، بل من أن الموقع لم يُصمَّم بحيث يتكيّف مع الشاشة الصغيرة. واسم هذه المشكلة هو غياب التصميم responsive (المتجاوب). نتناول في هذا المقال أعراضه وأسبابه وحلوله بالترتيب.

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

الأعراض: ما الذي يتشوّه على الهاتف بالضبط؟

شاشة سطح المكتب واسعة وتتيح مساحة كبيرة في الاتجاه الأفقي؛ أما شاشة الهاتف فضيّقة وعمودية وتعمل باللمس. فحين تحاول صفحة مُصمَّمة لشاشة واسعة أن تتسع في شاشة ضيّقة، يختل تخطيطها وتظهر أعراض نموذجية:

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

السبب: المقاسات الثابتة والإعدادات الناقصة

ينشأ معظم المشكلات من بناء الصفحة بـ مقاسات ثابتة مطابقة لعرض سطح المكتب. فحين يُصمَّم التخطيط على أساس عرض شاشة واحد، لا تتسع العناصر في مواضعها في أي شاشة أضيق من ذلك العرض. وأكثر الأسباب شيوعًا هي:

• عروض px الثابتة: إذا أُعطي قسمٌ عرضًا ثابتًا مثل width: 1200px، فإن ذلك القسم لا يتسع في هاتف عرضه 380 بكسل ويؤدي إلى انزلاق أفقي.
• غياب وسم viewport meta: إن لم يوجد وسم viewport meta في قسم head من الصفحة، فإن الهاتف يفتح الصفحة بعرض سطح المكتب ويحاول تصغيرها؛ فيبدو كل شيء صغيرًا ومنزلقًا.
• صور بلا max-width: إن لم يُوضع حدّ أعلى للصورة، فإنها تُفتح بحجمها الأصلي وتتجاوز الشاشة الضيّقة.
• عدم التفكير بالتخطيط للهاتف مطلقًا: صُمِّم الموقع للشاشة الواسعة وحدها، ولم يُحدَّد كيف تُرتَّب العناصر في الشاشة الصغيرة.

الحل: تخطيط سلس ومتجاوب

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

• وسم viewport meta: يُضاف إلى قسم head من الصفحة وسم viewport meta الحامل للقيمة width=device-width, initial-scale=1. يجعل هذا الهاتف يعرض الصفحة بعرضه الحقيقي؛ وهو الشرط الأول للتصميم responsive.
• الوحدات النسبية: تُستخدم بدل الـ px الثابت وحدات نسبية مثل النسبة المئوية وrem وvw؛ فتكبر العناصر وتصغر بتناسب مع عرض الشاشة.
• flexbox وgrid: تُرتَّب الأقسام بتخطيطَي flexbox وgrid في الـ CSS؛ فتنتقل العناصر الواقفة جنبًا إلى جنب في الشاشة الضيّقة تلقائيًا لتقف بعضها تحت بعض.
• media queries: تُحدَّد بـ استعلامات الوسائط قواعد مختلفة دون عروض شاشة معيّنة؛ فمثلًا تتحوّل القائمة على الهاتف إلى زر hamburger، ويقل عدد الأعمدة.
• max-width للصور: تُعطى الصور max-width: 100%؛ فلا تكون الصورة أوسع من حاويتها أبدًا ولا تتجاوز الشاشة.

الاستخدام باللمس ومنع الانزلاق الأفقي

على الهاتف، لا يعني التصميم مجرد «الاتساع» بل الاستخدام المريح بالإصبع. فبينما يمكن لمؤشّر الفأرة الضغط على أهداف دقيقة وصغيرة، فإن الإصبع أكبر وأقل دقة؛ لذلك قد يكون تخطيط يبدو سلسًا على سطح المكتب غير عملي باللمس. لذلك يُنتبَه إضافةً إلى ذلك إلى بضع نقاط:

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

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

باختصار، الموقع الذي يظهر مشوّهًا على الهاتف هو في الغالب موقع بُني بمقاسات ثابتة وبالتفكير بشاشة واحدة. إن وسم viewport، والوحدات النسبية، والتخطيط السلس المبني بـ flexbox/grid، والصور المحدودة بـ max-width: 100%، تضمن أن تظهر الصفحة نفسها بشكل سليم على الحاسوب والهاتف معًا. وبما أن الجزء الأكبر من الزيارات يأتي اليوم من الأجهزة المحمولة، فإن عمل الموقع دون مشكلات على الهاتف لم يعد خيارًا بل ضرورة أساسية.

الخدمات ذات الصلة: تصميم الويب والبرمجيات، البرمجيات وتطبيقات الحاسوب