ما هو
شاشات الهواتف ضيقة فعليًا، لكن لفترة طويلة، بُنيت معظم المواقع بافتراض شاشة سطح مكتب أوسع بكثير. للحفاظ على قابلية استخدام تلك المواقع القديمة، تفترض متصفحات الجوال افتراضيًا وبهدوء أن عرض الشاشة حوالي 980 بكسل — أي بحجم سطح المكتب تقريبًا — ثم تُصغّر النتيجة بالكامل لتلائم الشاشة، وهذا هو سبب ظهور صفحة غير مُعدّة بشكل مصغّر ومُبعّد على الهاتف حتى يقوم أحدهم بتكبيرها بحركة القرص.
وسم viewport الوصفي هو سطر كود واحد، <meta name="viewport" content="width=device-width, initial-scale=1">، يتجاوز ذلك الإعداد الافتراضي القديم ويخبر المتصفح "اضبط حجم هذه الصفحة فعليًا لتطابق عرض الشاشة الحقيقي، بتكبير عادي". هذا ما يجعل التصميم المتجاوب (الذي يتكيف مع أحجام الشاشات المختلفة) يعمل فعليًا على الهاتف.
لماذا يهم
بدون هذا الوسم، لا تحصل الصفحة التي صُممت بعناية لإعادة التدفق وتغيير الحجم لشاشات الجوال على الفرصة لفعل ذلك أبدًا — يعرضها الهاتف كتخطيط سطح مكتب مُصغّر بغض النظر عن كيفية بناء التصميم الأساسي فعليًا. هذا إعداد تقني بحت وثنائي: إما أن يكون الوسم موجودًا وصحيحًا، أو يرى كل زائر على الهاتف التخطيط الخاطئ، بغض النظر عن مدى جودة تصميم بقية الموقع.
ولأن أكثر من نصف حركة المرور على الويب في معظم المواقع تأتي من الهواتف، يمكن لهذا السطر الواحد المفقود أن يؤثر على غالبية الزوار حتى قبل أن يبدأوا في القراءة.
كيفية الإصلاح
- اعرض مصدر HTML الخاص بصفحتك وتحقق داخل قسم
<head>من وجود وسم يبدأ بـ<meta name="viewport". - إذا كان مفقودًا، أضف
<meta name="viewport" content="width=device-width, initial-scale=1">مباشرة داخل قسم<head>. - إذا كنت تستخدم أداة بناء مواقع (Squarespace أو Wix أو Webflow أو WordPress)، فهذا يُضبط تلقائيًا بواسطة المنصة — الوسم المفقود هنا يشير غالبًا إلى تضمين كود مخصص يتجاوزه، لذا تحقق من أي كود
<head>مخصص أضفته. - تجنب إضافة
maximum-scale=1أوuser-scalable=noإلى نفس الوسم — تمنع هذه الإضافات الزوار من التكبير بحركة القرص، مما يخلق مشكلة إمكانية وصول منفصلة. - حمّل الصفحة على هاتف حقيقي (أو وضع معاينة الجوال في متصفحك) بعد ذلك للتأكد من أنها تملأ الشاشة الآن بحجم مقروء بدلاً من الظهور مُبعّدة.