ما هو Meta Viewport ولماذا هو مهم في تصميم المواقع؟
Meta Viewport هو وسم (Tag) نضعه داخل الكود ليخبر المتصفح
كيف يعرض الصفحة على مختلف الأجهزة (موبايل، تابلت، لابتوب).
بدونه، الموقع يظهر صغير جدًا على الهواتف ويحتاج المستخدم للتكبير أو التمرير الأفقي.
🎥 شاهد الشرح العملي
قبل أو بعد القراءة، يمكنك مشاهدة الفيديو:
👉 شاهد الفيديو هنا
الكود الأساسي للـ Meta Viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0">
شرح مكونات الكود
- name="viewport" → يحدد أن هذه الإعدادات خاصة بالعرض (Viewport).
- width=device-width → يجعل عرض الصفحة يساوي عرض الجهاز (مهم للهواتف).
- initial-scale=1.0 → يبدأ العرض بنسبة 100% (بدون تكبير أو تصغير عند التحميل).
خصائص إضافية (تُستخدم أحيانًا)
| الخاصية | ماذا تفعل |
|---|---|
maximum-scale=1.0 |
تحدد أقصى درجة تكبير يُسمح بها |
user-scalable=no |
تمنع المستخدم من التكبير/التصغير يدويًا (غير مفضلة لأنها قد تضر تجربة ذوي النظر الضعيف) |
لماذا Meta Viewport مهم؟
- تحسين تجربة المستخدم → يجعل الصفحة مقروءة بسهولة على الهواتف.
- تصميم متجاوب (Responsive) → الصفحة تتكيف مع جميع الشاشات.
- تحسين لمحركات البحث (SEO) → جوجل يعطي أولوية للمواقع المتوافقة مع الموبايل.
- سرعة وأداء أفضل → المتصفح لا يضطر لتكبير أو تصغير المحتوى يدويًا.
ملاحظات هامة
- لا يُنصح باستخدام
user-scalable=noلأنه يمنع المستخدم من التحكم بالتكبير. - الأفضل ترك الحرية للزائر، خصوصًا لأصحاب النظر الضعيف.
- حتى مع وجود
meta viewport، يجب أن تستخدم CSS متجاوب مثل Flexbox و Grid.
الخلاصة
الكود التالي صغير جدًا لكنه أساسي لأي موقع عصري:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
بدونه، الموقع لن يكون صديقًا للهواتف، وهذا يضر تجربة المستخدم وحتى ظهوره في نتائج جوجل.