ما الغرض من استخدام عنصر Meta Viewport ؟
نظرييعد عنصر meta viewport مكوناً جوهرياً في "تصميم الويب المتجاوب" (responsive web design) .
( meta element ) عنصر خاص في لغة HTML يزود المتصفح بتعليمات حول كيفية التحكم في "أبعاد الصفحة" (page's dimensions) ومستوى تكبيرها أو تصغيرها (التحجيم) على مختلف الأجهزة، ولا سيما الهواتف المحمولة والأجهزة اللوحية.
لنلقِ نظرةً على الصيغة الأساسية لعنصر meta viewport :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
عادةً ما يُوضع هذا العنصر في قسم الرأس head من مستند HTML الخاص بك. ولكن، ماذا يعني كل جزء من أجزاء هذا العنصر؟
يُوجّه الجزء width=device-width المتصفحَ لضبط "عرض الصفحة" (width of the page) بحيث يطابق عرض شاشة الجهاز; ويُعد هذا أمراً جوهرياً لإنشاء "تخطيطات متجاوبة" (responsive layouts) تتكيف مع أحجام الشاشات المختلفة.
تُحدد الخاصية initial-scale=1.0 مستوى التكبير الأولي عند تحميل الصفحة لأول مرة; إذ تعني القيمة 1.0 أن الصفحة تُعرض بمستوى تكبير 100%, دون أي تغيير في الحجم (Scaling).
من خلال استخدام عنصر meta viewport , فإنك تضمن عرض صفحات الويب الخاصة بك بشكل صحيح على الأجهزة المحمولة.
بدون ذلك، عادةً ما تقوم متصفحات الأجهزة المحمولة بعرض الصفحة وفقاً لعرض شاشة سطح المكتب ثم تصغير حجمها، مما قد يؤدي إلى "تجربة مستخدم سيئة" (poor user experience) تتسم بنصوص صغيرة يصعب قراءتها.
يتيح لك أيضاً عنصر meta viewport التحكم في إمكانية قيام المستخدمين بتكبير وتصغير صفحات الويب الخاصة بك.
على الرغم من إمكانية تعطيل ميزة التكبير باستخدام السمة user-scalable=no , إلا أنه يُنصح عموماً بتجنب ذلك لاعتبارات تتعلق بإمكانية الوصول.
يعتمد العديد من المستخدمين على إمكانية التكبير لتحسين القراءة، ولا سيما ذوي الإعاقات البصرية.
إليك مثال على ما لا ينبغي فعله:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
بدلاً من ذلك، من الأفضل تصميم موقعك الإلكتروني ليكون متجاوباً وقابلاً للقراءة عند مستويات تكبير مختلفة، مما يضمن لجميع المستخدمين الوصول إلى المحتوى الخاص بك بسهولة وراحة.
يلعب عنصر meta viewport دوراً حاسماً في إنشاء مواقع إلكترونية متوافقة مع الأجهزة المحمولة.
يضمن عرض تصميماتك المتجاوبة - التي أُعدت بعناية - بالشكل المقصود على مختلف الأجهزة, مما يوفر تجربة مستخدم أفضل لجميع زوار موقعك.
أسئلة :
ما هو الغرض الأساسي من الوسم <meta name="viewport"> ؟
1. لتحسين سرعة تحميل الموقع الإلكتروني. ❌
2. للتحكم في أبعاد الصفحة ومقياس العرض على مختلف الأجهزة. ✅
3. لتوفير أوصاف للصفحة لمحركات البحث. ❌
4. لتفعيل وظائف JavaScript. ❌
ما هي وظيفة width=device-width في وسم <meta name="viewport"> ؟
1. يضبط عرض جميع الصور ليتناسب مع عرض الجهاز. ❌
2. يوجه المتصفح لمطابقة عرض الصفحة مع عرض شاشة الجهاز. ✅
3. يُعدّل حجم الخط بناءً على عرض الجهاز. ❌
4. يُحدّد الحد الأقصى لعرض صفحة الويب. ❌
لماذا يُنصح عمومًا بتجنب استخدام user-scalable=no في وسم <meta name="viewport"> ؟
1. قد يتسبب ذلك في تعطل الموقع على أجهزة معينة. ❌
2. يمنع ذلك محركات البحث من فهرسة الموقع. ❌
3. قد يؤدي ذلك إلى مشاكل في سهولة الوصول للمستخدمين الذين يحتاجون إلى استخدام خاصية التكبير. ✅
4. يؤدي ذلك إلى بطء تحميل الموقع على الأجهزة المحمولة. ❌